多个指令请求隔离作用域以调用AngularJS中的主机作用域函数
我需要将2个回调附加到一个字段,如下所示:多个指令请求隔离作用域以调用AngularJS中的主机作用域函数,angularjs,angularjs-directive,angularjs-scope,Angularjs,Angularjs Directive,Angularjs Scope,我需要将2个回调附加到一个字段,如下所示: <input ng-model="someModel" first-callback="myOwnCallback()" second-callback="myOtherCallback()"> [...] .directive('firstCallback', function() { return { restrict: 'A', scope: { firstCa
<input ng-model="someModel"
first-callback="myOwnCallback()"
second-callback="myOtherCallback()">
[...]
.directive('firstCallback', function() {
return {
restrict: 'A',
scope: { firstCallback: '&' },
[...]
}
})
.directive('secondCallback', function() {
return {
restrict: 'A',
scope: { secondCallback: '&' },
[...]
}
})
[...]
这显然不起作用,因为这两条指令都请求一个隔离作用域,这是不可能的,而且ngModel作用域也可能存在一些问题(如果有的话)
这是一个plnkr:
任何人都可以告诉我在这种情况下是否有良好的实践?是否需要将回调分解为两种不同的指令?你喜欢这个工作吗 更新示例
解释输入回调的性质?他们应该如何工作?ng change不是一个“回调”吗?@EliteOctagon是的,ng change是一个回调。第一个是延迟后仅调用一次的去抖动ng更改,第二个是仅在按下某些键时调用的条件ng更改。顺便说一句,在我链接的plnkr中,有一个完整的例子说明了我正在努力实现的目标。明白了,现在更清楚了。实际上,我需要在两个指令中中断功能,因为在某些情况下,我需要一个指令,而在其他情况下,我需要另一个指令。在任何情况下,我都需要弄清楚如何实现这一点,因为我想这可能是一个非常常见的场景。实际上,我可以只编写一个公开这两个属性的场景,但我想知道如何保持这两个属性的不同。如何创建模块,并根据指令的需要导入它们?我不明白你的意思。你是说角模吗?你能给我举个例子吗?别提模块的概念。为一个指令定义一个额外的参数,该指令将用于驱动key up上发生的情况的case语句,怎么样?
.directive('debounceChangeAction', function($timeout) {
return {
restrict: 'A',
require: 'ngModel',
scope: {
debounceChangeAction: '&',
specialKeyAction: '&'
},
link: function(scope,el,attrs,ngModel) {
console.log('helo')
var updateTimeout,
delay = 200;
var keys = [13,9];
var update = function(e) {
if (keys.indexOf(e.keyCode) !== -1) {
scope.specialKeyAction();
return;
}
if(updateTimeout) $timeout.cancel(updateTimeout);
updateTimeout = $timeout(function() {
scope.debounceChangeAction();
}, delay);
}
el.on('keyup', update);
scope.$destroy(function() {
el.unbind('keyup');
});
}
};
});
angular.module('app', [])
.controller('main', function($scope,$timeout) {
$scope.myDebounceChangeAction = function() {
console.log('debounceChangeAction', $scope.filter)
}
$scope.mySpecialKeyAction = function() {
console.log('specialKeyAction', $scope.filter)
}
})
.directive('debounceChangeAction', function($timeout) {
return {
restrict: 'A',
require: 'ngModel',
scope: {
debounceChangeAction: '&',
specialKeyAction: '&',
enabler:'@'
},
link: function(scope,el,attrs,ngModel) {
console.log('helo')
var updateTimeout,
delay = 200;
var keys = [13,9];
var fooA=function(e){
if (keys.indexOf(e.keyCode) !== -1) {
scope.specialKeyAction();
return;
}
};
var fooB = function(e){
if(updateTimeout) $timeout.cancel(updateTimeout);
updateTimeout = $timeout(function() {
scope.debounceChangeAction();
}, delay);
};
var update = function(e) {
switch(scope.enabler){
case 'A':
fooA(e);
break;
case 'B':
fooB(e);
break;
case 'AB':
fooA(e);
fooB(e);
break;
}
}
el.on('keyup', update);
scope.$destroy(function() {
el.unbind('keyup');
});
}
};
});