Seleziona direttiva personalizzata e ng-change

Question

Utilizzando <select> con una direttiva personalizzata, voglio eseguire una funzione quando il valore viene modificato.

html

<select name="user_type" ng-model="user_type" user-type ng-change="check_type()"> 

direttiva

gb_dash.directive('userType', function(){ 
    return{ 
     restrict: 'A', 
     require: '^ngModel', 
     scope:{ 
      check_type: '&' 
     }, 
     link: function(scope, elem, attrs){ 
      scope.check_type = function(){ 
       console.log('changed'); 
      } 
     } 
    } 
}); 

Answer 1

Dal momento che si dispone di un ambito isolato, il vostro check_type non è nella stessa portata del ng-change espressione. E tu non vorresti che fosse così.

Invece, ng-model fornisce un modo per registrare un listener con ngModel.$viewChangeListeners - che è esattamente quello che usa la direttiva ngChange - per visualizzare gli eventi di modifica del modello.

require: "ngModel", 
scope: { }, // to mimic your directive - doesn't have to be isolate scope 
link: function(scope, element, attrs, ngModel){ 
    ngModel.$viewChangeListeners.push(function(){ 
    console.log('changed'); 
    } 
} 

Answer 2

A causa del vostro ambito isolato, è possibile includere una chiamata a $parent per ottenere il risultato. Prova questo cambiamento ...

link: function(scope, elem, attrs) { 
    scope.$parent.check_type = function() { 
     console.log('changed'); 
    } 
} 

Tuttavia, chiamando $parent non può essere l'ideale per la vostra situazione.

In alternativa è possibile abbandonare ng-change e invece $watch il ngModel. Ciò potrebbe essere realizzato come tale ...

link: function(scope, elem, attrs, ngModel) { 
    scope.$watch(function() { 
     return ngModel.$modelValue; 
    }, function(newValue, oldValue) { 
     console.log('model value changed...', newValue, oldValue); 
    }, true); 
} 

JSFiddle Link - $parent demo

JSFiddle Link - $watch demo