在其他分区点击动态变化的div内容（AngularJS） [英] Change div content dynamically on other div click (AngularJS)

问题描述

所以，我是新来的AngularJS我试图另一个被点击后改变一个div的内容（这其中包含与我想提出的第一个内容的div）。

So, I'm new to AngularJS and I'm trying to change a div content after another is clicked (this one holds a div with the content that I want to put on the first one).

HTML

<div ng-controller="dCtrl">
    <ul ng-repeat="product in products">
        <li change>
            {{product.name}}
            <div class="hide">{{product.description}}</div>
        </li>
    </ul>
</div>

<div id="test"></div>

的JavaScript

Javascript

var app = angular.module("dt", []);

app.directive("change", function() {

    return function(scope, element) {

        element.bind("click", function() {
           var message = element.children("div").text();
           console.log("breakpoint");

           angular.bind("#test", function() {
               this.text(message);
           });
        })
    }
})

app.controller("dCtrl", function($scope) {

$scope.products = [
    { "name" : "Escova XPTO", "description": "Lava tudo num instante"},
    { "name" : "Pasta de Dentes YMZ", "description": "Dentifrico do camandro"}
];

})

我知道我可以只说：

I know that I could just say:

$("#test").html(message);

但我还是感到困惑混合jQuery和AngularJS，我不知道如果这是这样做的正确方法

But I'm still confused about mixing jQuery and AngularJS, I dont know if that is a correct way of doing it

感谢

推荐答案

设置NG-点击：

ngClick 是做的东西，如您在正在进行的吓人的jQuery式的东西你改变指令。在您点击DIV的属性发生NG单击并传递改变的...接受$范围的变量的方法

ngClick is for doing things such as the scary jQuery-esque stuff you have going on in your change directive. Place ng-click in your clickable div's attributes and pass in a method that changes the $scope variable accepted by...

ngShow 并的ngHide 。

ngShow and ngHide.

当真正的这些指令，在命名状态，显示或隐藏关联的HTML对象。您可以在$范围变量决定的布尔值传递。当$范围更新这些方法会自动更新DOM来显示/隐藏的元素。

When true these directives, as the name states, show or hide the associated html object. You can pass in $scope variables determine the boolean value. When the $scope updates these methods automatically update the DOM to show/hide the element.

这篇关于在其他分区点击动态变化的div内容（AngularJS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！