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

并且：

为我们的app逻辑创建一个不需要DOM存在的单元测试。

问题：

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

Answer 1

使用ng-click与另一个javascript点击处理程序之间的主要区别在于，角度范围之外的任何事件处理都需要调用scope.$apply()以告知角度已进行更改并为此运行摘要范围。

当您使用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'
          });
        });
  }
});

首先需要更多标记，但更容易测试，其次需要额外的代码来通知更改角度

的 DEMO

AngularJS和结构/行为耦合？

1 个答案: