检测控制器内的指令属性值更改

Question

我有下面提到的用于检测元素的单击事件的自定义指令。

指令

.directive('myDir', [ 
     '$document', function ($document) { 

      return { 
       restrict: 'A', 
       scope: true, 
       link: function (scope, element, attrs) { 
        scope.IsWizardOpen = false; 

        element.on('click', function (e) { 
         scope.$apply(function() { 
          scope.IsWizardOpen = true; 
         }); 
         e.stopPropagation(); //stop event from bubbling up to document object 
        }); 

       } 
      }; 
     }]); 

我曾尝试观看控制器内部的IsWizardOpen属性的变化，如图below.But它不工作？单击元素（true）后，IsWizardOpen的值已更改。那么您能告诉我问题在哪里？提前致谢。

控制器

$scope.$watch('IsWizardOpen', function() { 
      if ($scope.IsWizardOpen) { 
       //my task 
      } 
     }); 

的Html

<div my-dir> 
</div> 

Answer 1

那么原始值绑定到子作用域他们分配的时候，因此，你需要有一个对象加以包装。要深入挖掘，请阅读this。

我做了一个拨弄着一些细微的变化，基本上我在控制器中创建一个包装对象，那么你的指令对其进行更新：

控制器：

function MyCtrl($scope) { 
    $scope.wrapper = {}; 

    $scope.$watch(function() { 
     return $scope.wrapper.IsWizardOpen; 
    }, function (newVal, oldVal) { 
      if (newVal) { 
       alert('watch works'); 
      } 
     }); 
} 

指令：

myApp.directive('myDir', [ 
     '$document', function ($document) { 

      return { 
       restrict: 'A', 
       scope: true, 
       template: '<div>Click Me!</div>', 
       link: function (scope, element, attrs) { 

        scope.wrapper.IsWizardOpen = false; 

        element.on('click', function (e) { 

         scope.wrapper.IsWizardOpen = true; 
         scope.$apply(); 
         e.stopPropagation(); //stop event from bubbling up to document object 
        }); 

       } 
      }; 
     }]); 

Fiddle