javascript - 为什么指令没有执行

Question

我想知道为什么在单击项目后指令 my-dir 没有执行。它在页面加载和完成编辑事件时执行(实际上子 div 代表 ng-grid 单元格，这就是存在此类事件的原因)

<div ng-controller="Cntl">
    <div ng-click="select(item1)" my-directive="item1"></div>
    <div ng-click="select(item2)" my-directive="item2"></div>
    <div ng-click="select(item3)" my-directive="item3"></div>
</div>

Controller 和指令的定义大致如下:

app.controller('Cntl',function($scope, ...){
    $scope.highlightedItems = {item1:true, item2:false, item3:false};
    $scope.select = function(item){
        // basically set the value of the property in $scope.highlightedItems to true
        // the structure of the items is a bit more sophisticated though
        // but it doesnt matter here
    };
    $scope.is_highlighted = function(item){ // checks if $scope.highlightedItems is true or false for item 
    };   
};
app.directive('myDirective', function(){
   return {
       link: function(scope, element, attr){
          if(scope.is_highlighted(attr.myDirective)){
              // do something
           }        
       };       
    };
 });

提前致谢! (请注意，我仅为这个问题编写了代码，它是原始模型，但希望它能说明我的问题)

Answer 1

指令中的 link 函数仅调用一次(当作用域链接到 DOM 时)。这是在链接阶段。

所以子句:

   if(scope.is_highlighted(attr.myDirective)){
      // do something
   } 

目前每个指令仅执行一次。

如果您想监视值的变化，则需要在指令中进行设置:

   link: function(scope, element, attr){

      scope.$watch('highlightedItems', function(value) {
          if(scope.is_highlighted(attr.myDirective)){
              // do something
          }
      }, true);        
   };