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

14 浏览
0 Comments

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

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

Javascript:

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

HTML:




  
  Example - example-example78-production

实例链接: http://plnkr.co/edit/jqk5529FmdGsxK6Xj8LZ?p=preview

0

2 答案

0 Comments

问题的原因是隔离作用域（isolated scope）在link函数中不是立即可用的。可以参考这个类似问题的答案：AngularJS - Access isolated scope in directive's link function

解决方法是使用$timeout函数将代码延迟执行，以确保隔离作用域已经被创建。具体代码如下：

angular.module('myApp').directive('myDirective', ['$timeout', function($timeout) {
  return {
    restrict: 'E',
    scope: {
      data: '='
    },
    link: function(scope, element, attrs) {
      $timeout(function() {
        // 在这里可以访问隔离作用域
        console.log(scope.data);
      });
    }
  };
}]);

使用$timeout函数可以确保在link函数中访问隔离作用域时，作用域已经被创建，从而解决了问题。

0
0 Comments

为什么我的AngularJS指令中的链接函数没有执行？

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

解决方法：使用双向绑定（=代替@），来更改标志值：

scope: {
    flag: '='
}

在链接函数内部，您可以将标志设置为任何适当的值，例如：

scope.flag = true;

0