2017-02-21 72 views
0

我試圖讓自定義指令激活ngChange事件,以便原始控制器在指令中的數據發生更改時執行某些操作。從自定義指令觸發ngChange

我的指令看起來像這樣:

.directive('spInputCheckbox', function() { 
     return { 
      scope: { 
       ngModel: '=', 
       ngChange: '&' 
      }, 
      restrict: 'AE', 
      replace: 'true', 
      template: '<div><span ng-click="model = !model"><i ng-if="model">X</i></span><input type="checkbox" ng-model="model" ng-change="change(model)" /><span ng-if="title">{{ title }}</span></div>', 
      link: function(scope, elem, attr){ 
        scope.title = attr.title 
       scope.$watch('ngModel', function(value){ 
        if(value){ 
         scope.model = scope.ngModel 
        } 
       }); 

       scope.change = function(value){ 
        scope.ngModel = scope.model 
        scope.ngChange() 
       } 
      } 
     }; 
    }) 

這裏就是我稱之爲

<sp-input-checkbox ng-model="info" 
     ng-init="info = false" 
     title="click me" 
     ng-change="alert(7)" /> 

這裏有一個JsFiddle與代碼

回答

0

由於這種改變是一個點擊事件,你可以使用ng-click。可以爲ng-click事件調用示波器功能。

<sp-input-checkbox ng-model="info" ng-init="info = false" title="click me" ng-click="modified()" />

$scope.modified = function(){ alert(7); };

Solution

+0

這將得到警報顯示。但不會觸發我正在尋找的ng-change事件 –

+0

是的。但由於它是一個複選框,點擊是唯一可能的改變,爲什麼你需要ng-change事件? – pahan

+0

萬一它不是複選框,比如輸入類型=「text」 –

0

也許看模型可以做你想實現這樣的

scope.$watch('model', function(value){ 
    if(value){ 
     scope.ngModel = scope.model 
     hasChange = true 
    } 

    if(hasChange) { 
      scope.change() 
    } 
}); 

什麼看整個代碼here