AngularJS与结构/行为耦合

Question

我正在努力了解AngularJs如何不违反最佳实践：

看<div ng-click="doSomething()">...</div>

它有这些好处：

• 在每个浏览器中都有相同的行为。Angular会为您处理差异。(嗯？jQuery也做。(NG使用jqLite)。

• 不要对全局命名空间进行操作。

  嗯-嗯-这里的匿名函数也没有污染全局名称空间：

<div class="myDiv" >...</div>

$(".myDiv").on('click',function (){})

我(！)在这里看到的唯一好处是：

• 指定的表达式只能访问在元素控制器范围内的函数和数据

示例：

<div class="navbar" ng-controller="NavController">
…
<li class="menu-item" ng-click="doSomething()">Something</li>
…
</div>
<div class="contentArea" ng-controller="ContentAreaController">
…
<div ng-click="doSomething()">...</div>
…
</div>

其中：

function NavController($scope) {
$scope.doSomething = doA;
}
function ContentAreaController($scope) {
$scope.doSomething = doB;
}

和：

• 为我们的应用程序逻辑创建一个不需要DOM的单元测试

问题：

话虽如此，<div ng-click="doSomething()">...</div>与<div on-click="doSomething()">...</div>(or $(..).on('click'....))有何不同？

Answer 1

使用ng-click与另一个javascript点击处理程序的主要区别在于，任何在angular作用域之外的事件处理都需要调用scope.$apply()，以告知angular已经进行了更改并运行该作用域的摘要。

当您使用ng指令进行事件处理时，ng指令将负责为您运行新摘要。

考虑这两个执行相同任务的指令：

HTML

<button one ng-click="doSomething()">Update</button>
<button two>Update</button>

JS-

app.directive('one', function() {
return function(scope) {
scope.doSomething = function() {
scope.text_1 = "New Text"
}       
}
});
app.directive('two', function() {
return function(scope, elem) {
elem.on('click',function(){
scope.$apply(function(){/* must tell angular we're making a change*/
scope.text_2='New Text'
});
});
}
});

第一个需要更多的标记，但更容易测试，第二个需要额外的代码来通知角度的变化

演示