修改

Question

我正在阅读一个教程，可以看到here。我无法理解客户指令<hello-world/>上的事件监听器。

应用程序的布局如下：

的index.html

<!DOCTYPE html>
<html ng-app="myapp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.7/angular.js" data-semver="1.2.7"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <input type="text" ng-model="color" placeholder="Enter a color"/>
    <hello-world/>
  </body>

</html>

app.js

var app = angular.module('myapp', []);

app.controller('MainCtrl', function($scope) {

});

app.directive('helloWorld',function(){
  return{
    restrict: 'AE',
    replace: true,
    template: '<p style="background-color:{{color}}">Hello World</p>',
    link: function(scope,elem,attrs){
      elem.bind('click',function(){
        elem.css('background-color','white');
        scope.$apply(function(){
          scope.color="white";
        });
      });
      elem.bind('mouseover',function(){
        elem.css('cursor','pointer');
      });
    }
  }
});

我的问题是为什么点击监听器中的回调包含$apply方法？为什么不能只有scope.color="white";

Answer 1

scope: true指令当前查看其父作用域（在其他情况下，如果指令中有属性scope.$apply，它将具有隔离范围，但这不是这种情况。）

在查看数据父级作用域的指令中，没有双向数据绑定。换句话说，该指令最初将从其父作用域接收信息，但它不会发送更新到父作用域。这就是我们致电scope: true的原因。这会手动强制在作用域上发生摘要周期，该作用域将遍历所有观察者并查找更改。

这就是人们在“脱离背景”时发生的意思。

为了更多地了解摘要周期，我将看一下这个article，它基本上向您展示了如何在非常高的抽象层次上构建自己的AngularJS版本。

要添加所有这些，如果指令中有scope.$apply并因此允许指令具有自己的隔离范围，则不需要elem.bind('click',function(){ elem.css('background-color','white'); //scope.$apply(function(){ //scope.color="white"; //}); });方法。但是，除非您明确授予父作用域对数据的访问权限（例如，通过手动查找作用域的父级，即不是'，否则隔离的作用域数据仅仅可用于该指令且没有父作用域。对于这种类型的东西，你想要查看controllerAs syntax，这只涉及与命名空间组件相关的内容。）

修改

scope

以上仍然会将元素的背景颜色更改为白色。这与elem.bind('click',function(){ elem.css('background-color','white'); scope.$apply(function(){ scope.color="white"; }); });无关。

<input type="text" ng-model="color" placeholder="Enter a color"/>

以上强制父范围在文本框中显示颜色“white”的文本名称（这一个：ng-model）。

scope.color是指{% assign sortedOrders = customer.orders | sort: 'order.shipping_address.name' %} {% for order in sortedOrders %} ... {% endfor %}。

在Angular

1 个答案:

修改