在其他div点击动态更改div内容（AngularJS）

Question

所以，我是AngularJS的新手，我试图在点击另一个之后更改div内容（这个包含一个div，其中包含我想要放在第一个上面的内容）。

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

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"}
];

})

我知道我可以说：

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

但我仍然对混合jQuery和AngularJS感到困惑，我不知道这是否是一种正确的方法

谢谢

Answer 1

设置ng-click：

ngClick用于执行诸如您在更改指令中进行的可怕的jQuery-esque之类的操作。 在您的可点击div的属性中单击ng并单击并传入一个方法，该方法更改由...接受的$ scope变量

ngShow和ngHide 。

如果为true，则这些指令（如名称所示）显示或隐藏关联的html对象。 您可以传入$ scope变量来确定布尔值。 当$ scope更新时，这些方法会自动更新DOM以显示/隐藏元素。