将<select>
与自定义指令一起使用,我希望在更改值时运行函数。
HTML
<select name="user_type" ng-model="user_type" user-type ng-change="check_type()">
指令
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');
}
}
}
});
答案 0 :(得分:4)
由于您有隔离范围,因此check_type
与ng-change
表达式的范围不同。而且你不会希望它如此。
相反,ng-model
提供了一种方法来注册一个具有ngModel.$viewChangeListeners
的侦听器 - 这正是ngChange
指令使用的 - 来挂钩到视图模型更改事件。
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');
}
}
答案 1 :(得分:2)
由于您的隔离范围,您可以调用$parent
来获得结果。试试这个改变......
link: function(scope, elem, attrs) {
scope.$parent.check_type = function() {
console.log('changed');
}
}
但是,拨打$parent
可能不适合您的情况。
或者,你可以放弃ng-change
而不是$watch
你的ngModel
。这可以这样完成......
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
演示
JSFiddle Link - $watch
演示