AngularJS和结构/ behavbiour耦合？ [英] AngularJS and structural/behavbiour coupling?

问题描述

我想了解如何做AngularJs没有违反最佳做法：

I'm trying to understand how does AngularJs is not violating best practices :

看着＆LT; D​​IV NG点击=DoSomething的（）＆GT; ...＆LT; / DIV＆GT;

它有那些好处：

• 规矩在每个浏览器一样。角照顾的差异为您服务。 （吧？ jQuery不会也。（NG使用jqLit​​e）。

• Behave the same in every browser. Angular takes care of the differences for you. ( huh ? jQuery does it also. ( NG uses jqLite).

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

Do not operate on the global namespace. .

呵呵 - 好 - 而且，这里的匿名函数不污染全局命名空间：

huh? - well - Also here the anonymous function is not polluting the global namespace:

＆LT; D​​IV CLASS =myDiv＆GT; ...＆LT; / DIV＆GT;

$（myDiv）。在（'点击'，功能（）{}）

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

The only benefits I(!) see here are :

• 您指定ex pressions只能访问功能和数据的是元素的控制范围的

• The expressions you specify can only access functions and data that is in the scope of the element’s 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是present。

问：

说了这么多，如何＆LT; D​​IV NG点击=DoSomething的（）＆GT; ...＆LT; / DIV＆GT; 被认为是非常不同＆LT;格上单击=DoSomething的（）＆GT; ...＆LT; / DIV＆GT; （或$（..）上（'点击'....））？

Having said that , how does <div ng-click="doSomething()">...</div> is considered as very different from <div on-click="doSomething()">...</div> ( or $(..).on('click'....)) ?

推荐答案

使用之间的主要区别 NG-点击 VS另一个JavaScript单击处理程序是，任何事件处理外角范围需要调用范围。$适用（）为了告诉角度发生了改变，并为该范围运行摘要。

The main difference between using ng-click vs another javascript click handler is that any event handling outside of angular scope requires calling scope.$apply() in order to tell angular a change was made and to run a digest for that scope.

当您使用纳克指令事件处理中，纳克指令将运行新摘要照顾给你的。

When you use an ng directive for event handling, the ng directives will take care of running the new digest for you.

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

Consider these two directives that perform identical tasks:

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

首先需要更多的标记，但更容易测试，第二个需要额外的code通知角度变化的

First requires more markup, but is easier to test, second requires additional code to notify angular of changes

<大骨节病> 演示

这篇关于AngularJS和结构/ behavbiour耦合？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！