javascript - AngularJS 和结构/行为耦合？

Question

我试图了解 AngularJs 如何不违反最佳实践:

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

它有这些好处:

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

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

  嗯？ - 好吧 - 这里的匿名函数也不会污染全局命名空间:

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

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

我(!)在这里看到的唯一好处是:

• 您指定的表达式只能访问元素 Controller 范围内的函数和数据

示例:

<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'
          });
        });
  }
});

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

DEMO