在没有注入$ rootScope的情况下对指令中的角度事件做出反应

Question

我想知道你是否有一个指令代码的例子,它对角度事件做出反应,比如$routeChangeError没有注入$rootScope它(用于$on链接函数).它打破了我的观点MV*模式和"产生"气味代码(给出了在指令中操纵根范围的可能性).提前致谢.

Answer 1

没有.没有任何方式可以在没有某种访问权限的情况下收听Angular事件$scope.这是他们获得$rootScope服务的主要原因之一,因此您可以$scope在服务或其他模块中访问.

但是,在指令中,您不需要注入,$rootScope因为您在链接函数的指令中已经有一个隔离范围.

例如:

.directive('myDirective', function(){
    return {
        restrict: 'A',
        link: function(scope, elem, attrs){
            scope.$on('some-event', function(e){
                // respond to event here
            });
        }
    };
});

您的scope变量是一个"隔离"范围,因此它不会以任何方式影响其父范围.但是,如果您尝试向某个姐妹级模块发出事件,则会产生一些奇怪的副作用,因为Angular事件仅在范围层次结构中$emit向上或$broadcast向下.如果你不是,那么上面的例子应该完美.如果您是,那么以下示例是一种方法:

.directive('myDirective', function($rootScope){
    var isolateScope = $rootScope.new();  // creates a new isolate copy of $rootScope
    return {
        restrict: 'A',
        link: function(scope, elem, attrs){
            isolateScope.$on('some-event', function(e){
                // respond to event here
            });
        }
    };
});

这将创建一个类似的隔离副本,$rootScope以便您对其所做的任何更改不会影响其他模块或服务.这可以防止"smell-code"您调用它时出现的任何问题.

Answer 2

如果你只是在听事件,你不必使用$rootScope; 例如$scope.$on("$routeChangeError"),在控制器或链接功能的指令范围内.

你看到它"$routeChangeError"是从广播的$rootScope,所以所有的孩子都收到它.

Answer 3

$on方法是在内部定义的Scope.prototype,因为Angular中的每个范围都是从Scope构造函数创建的,这意味着每个范围都有一个$on可用的方法.没有必要注入$rootScope,只需直接调用$on链接函数范围的指令上的方法:

app.directive('myDirective', function(){
  return function(scope, element, attrs){
    scope.$on('$routeChangeError', function(){
      // ...
    });
  }
});