多个指令请求隔离作用域以调用AngularJS中的主机作用域函数

多个指令请求隔离作用域以调用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

我需要将2个回调附加到一个字段,如下所示:

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