Fatal编程技术网
  • angularjs/
  • Angularjs 用$apply理解链接函数

Angularjs 用$apply理解链接函数

angularjs

Angularjs 用$apply理解链接函数,angularjs,Angularjs,我正在看一个教程，可以看到。我无法理解客户指令上的事件侦听器 应用程序的布局如下所示： index.html <!DOCTYPE html> <html ng-app="myapp"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base hr

我正在看一个教程，可以看到。我无法理解客户指令
上的事件侦听器

应用程序的布局如下所示：

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

var-app=angular.module（'myapp'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
});
app.directive（'helloWorld'，function（）{
返回{
限制：“AE”，
替换：正确，
模板：“
Hello World
”，
链接：功能（范围、要素、属性）{
元素绑定（'单击'，函数（）{
元素css（'背景色'，'白色'）；
作用域$apply（函数（）{
scope.color=“白色”；
});
});
元素绑定（'mouseover'，function（）{
元素css（'cursor'，'pointer'）；
});
}
}
});
我的问题是为什么单击侦听器中的回调包含
$apply
方法？为什么一个人不能只拥有
scope.color=“white”

指令
helloWorld
当前查看其父作用域（在其他情况下，如果指令中有属性
scope:true
，它将有一个隔离作用域，但这里不是这种情况。）

在查看数据父作用域的指令中，没有双向数据绑定。换句话说，该指令最初将从其父作用域接收信息，但不会向父作用域发送更新。这就是为什么我们称之为
范围。$apply
。这将手动强制作用域上发生摘要循环，该循环将在其所有观察程序中运行并查找更改

这就是人们在“断章取义”时的意思

为了了解更多关于摘要周期的信息，我将看一看这篇文章，它基本上向您展示了如何在非常高的抽象级别上构建自己的AngularJS版本

此外，如果指令中有
scope:true
，从而允许指令有自己的隔离作用域，则不需要
作用域。$apply
方法。但是，除非显式授予父作用域访问数据的权限，否则隔离作用域数据将仅对该指令可用，并且没有父作用域（例如，通过手动查找作用域的父级，这是不可取的。对于这种情况，您可能希望查看，这仅与命名空间组件相关。）

编辑 上述操作仍会将元素的背景颜色更改为白色。这与
范围
无关

  elem.bind('click',function(){
    elem.css('background-color','white');
    scope.$apply(function(){
      scope.color="white";
    });
  });
上面强制父作用域在文本框中显示颜色“白色”的文本名称（这个：
）

ng model
引用了
scope.color

elem.bind
发生在角度上下文之外-
$scope.$apply
手动触发摘要循环，以便视图得到更新如果回调包含角度语法，elem.bind怎么会发生在角度上下文之外？我不明白您的意思“回调包含角度语法”…我想说的是，当回调异步进行时，角度不知道它，因此它不会更新响应的bindingshanks。很好的解释。如果您转到plunker并删除
$apply
，只需使用
scope.color=“white”
应用程序仍按预期工作，即元素的颜色在单击时变回白色。这是否意味着除$apply之外的其他内容正在启动摘要循环？或者
范围：false
是指令中的默认值吗？@TheamateUrdata分析师，是的，颜色仍会变回，因为行
elem.css（'background-color'，'white'）；
@theamateurdataanalyst，但是
scope.white
不会传播到文本框，该文本框应该显示当前选定的颜色。啊，是的，你是对的，它不会传播到顶部。谢谢@Josh Beam。 
  elem.bind('click',function(){
    elem.css('background-color','white');
    scope.$apply(function(){
      scope.color="white";
    });
  });