javascript - 单击其他 div 动态更改 div 内容(AngularJS)

Question

所以，我是 AngularJS 的新手，我试图在单击另一个 div 后更改一个 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 式的事情。将 ng-click 放在可点击的 div 的属性中，并传入一个方法来更改接受的 $scope 变量...

ngShow和 ngHide .

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