jQuery 在其他 div 单击时动态更改 div 内容（AngularJS）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16043146/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change div content dynamically on other div click (AngularJS)
提问by Bruno Teixeira
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).
所以，我是 AngularJS 的新手，我试图在单击另一个 div 内容后更改它（这个 div 包含我想放在第一个的内容的 div）。
HTML
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);
But I'm still confused about mixing jQuery and AngularJS, I dont know if that is a correct way of doing it
但我仍然对混合 jQuery 和 AngularJS 感到困惑，我不知道这是否是一种正确的做法
Thanks
谢谢
采纳答案by Brian Petro
Setup ng-click:
设置ng-click：
ngClickis 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...
ngClick用于执行诸如更改指令中发生的可怕的 jQuery 式内容之类的事情。将 ng-click 放在可点击 div 的属性中，并传入一个方法，该方法更改...
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.
当这些指令为真时，正如名称所述，显示或隐藏关联的 html 对象。您可以传入 $scope 变量来确定布尔值。当 $scope 更新这些方法时，会自动更新 DOM 以显示/隐藏元素。
