Question

我需要将2个回调附加到<input>字段，如下所示：

<input ng-model="someModel" 
       first-callback="myOwnCallback()" 
       second-callback="myOtherCallback()">

我尝试实现这个创建2个指令，这两个指令都需要隔离范围，并使用'＆amp;'公开2个属性旗帜，像这样：

[...]
.directive('firstCallback', function() {
    return {
        restrict: 'A',
        scope: { firstCallback: '&' },
        [...]
    }
})
.directive('secondCallback', function() {
    return {
        restrict: 'A',
        scope: { secondCallback: '&' },
        [...]
    }
})
[...]

这显然不起作用，因为2个指令都要求隔离范围，这是不可能的（如果有的话，ngModel范围也可能存在一些问题）。

这是一个plnkr：http://plnkr.co/edit/QGc3yrjzt57lWOkd7Etb?p=preview

任何人都可以告诉我这种情况下是否有好的做法？

Answer 1

是否需要将回调分解为两个不同的指令？这样的事情会起作用吗？

http://plnkr.co/edit/CrqyG0H87eF3z2FlojBX?p=preview

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

更新示例 http://plnkr.co/edit/v0ztQEcuyYGVpq3Cv17E?p=preview

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

多个指令请求隔离范围在AngularJS中调用主机范围函数

1 个答案: