选择自定义指令和ng-change

时间:2015-07-07 18:28:28

标签: javascript html angularjs angularjs-directive

<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');
            }
        }
    }
});

2 个答案:

答案 0 :(得分:4)

由于您有隔离范围,因此check_typeng-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演示