Question

这是一个简单的Angular JS示例的HTML和Javascript。在这个例子中，为什么没有链接函数运行并将scope.flag设置为true（布尔值）而不是'true'（字符串）？

使用Javascript：

angular.module('truthyTypes', [])
  .directive('myDirective', function(){
    return {
      template: '<div>flag value: {{ flag }}<br/>flag type: {{ flag | typeOf }}</div>',
      scope: {
        flag: '@'
      },
      link: function(scope){
        scope.flag = scope.flag === 'true';
      }
    }
  })
  .filter('typeOf', function(){
    return function(input){
      return typeof input;
    }
  })
;

HTML：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example78-production</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-app="truthyTypes">
    <div my-directive flag="true"></div>
</body>
</html>

直播示例：http://plnkr.co/edit/jqk5529FmdGsxK6Xj8LZ?p=preview

Answer 1

您正在使用单向绑定，因此您对指令中的标志变量所做的任何更新都不会传播回控制器。

使用双向绑定（=而不是@）来更改标志值：

scope: {
    flag: '='
}

在链接功能中，您可以将标志设置为任何适当的值，例如

scope.flag = true;

Answer 2

孤立的范围不能立即用于链接功能。请看一下这个类似问题的答案：AngularJS - Access isolated scope in directive's link function

为什么我的AngularJS指令中的链接功能没有运行？

2 个答案: