2015-04-22 89 views
0

我有下面提到的用於檢測元素的單擊事件的自定義指令。檢測控制器內的指令屬性值更改

指令

.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> 
+0

什麼是「IsWizardOpen」?你是什​​麼意思? –

+0

@RameshRajendran它只是一個範圍屬性,我需要它來捕獲'click'事件。 – Sampath

+0

它不起作用,因爲它是綁定到子作用域的原語,控制器的作用域不會知道它。 –

回答

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

+0

哇..太棒了。非常感謝我的朋友。今天我學到了很多東西。再次感謝。 :) – Sampath

+1

@桑帕斯很高興幫助! –