为什么指令没有执行

Question

I am wondering why the directive my-dir is not executed after I click the items. It is executed when the page is loaded and on a finish-editing event (in fact the child divs represent ng-grid cells, that's why there exists such an event)

<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>

The Controller and directive are defined roughly as follows:

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

Thanks in advance! (Note that I have written the code only for this question, it is a model of the original, but it hopefully illustrates my problem)

Answer 1

The link function in the directive is only called once (when the scope is being linked to the DOM). This is during the link phase.

So the clause:

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

will only by executed once per directive, at the moment.

If you want to watch for changes in a value, you would need to set that up in the directive:

   link: function(scope, element, attr){

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

Answer 2

As Davin Tryon already mentioned link is executed only once so, you either have to attach a $watch / $watchCollection or attach a click handler to handle changes

JSFiddle

app.directive('myDirective', function () {
  return {
    link: function (scope, element, attr) {
      var listener = function () {
        if (scope.is_highlighted(attr.myDirective)) {
          // do something
        }
      };
      listener();
      element.on('click', listener);
    }
  };
});