Question

我已经定义了一个自定义过滤器和一个带有隔离范围的指令，当我没有将它注入指令模块时，我无法弄清楚为什么该指令可以访问自定义过滤器（我将它注入到应用程序模块 - 参见示例）。

过滤器的范围规则是否与其他范围属性不同？或者这是在考虑过滤器时使用的错误框架？

这里的工作示例：http://jsbin.com/IRogUxA/6/edit?html,js,output

提前致谢！

Answer 1

这是因为该指令是exampleApp模块创建的根作用域的子节点。 services，controllers和directives模块被注入exampleApp，从而在树之间从子到根范围提供原型继承。依赖toDate指令可访问的linkBox过滤器是危险的，以防将来某个时候由exampleApp创建的根作用域排除services模块。

Erstad Stephen在他的回答中所写的内容部分正确，但由于$ injector需要过滤器名称后缀为Filter，因此它的示例将无效。详见$filterProvider docs。

以下代码有效：

//CORE MODULE
angular.module('exampleApp',['controllers','directives']);

angular.module('controllers',[]).controller('app_ctrl',['$scope',function($scope){
  $scope.dateVal = 20131010;
}]);

angular.module('services',[]).filter('toDate',[function(){
  function func(ymd){
    ymd = ymd + "";
    var y = ymd.substring(0,4);
    var m = ymd.substring(4,6);
    var d = ymd.substring(6);
    return (+m) + "/" + (+d) + "/" + y;
  }
  return func;
}]);

//DIRECTIVE
angular.module('directives',['services']).directive('linkBox', ['toDateFilter', function(toDate){
  var dir = {
    transclude:false,
    scope:{isolateVar:'@linkBox'},
    replace:true,
    template:'<p>Filtered value: {{isolateVar | toDate}}</p>',
    link: function lfn(scope, instance, attr){
      var a = angular.element(instance); 
      a.text(scope.isolateVar.name);
      console.log(scope);
    } //end link function
  }; //end dir object
  return dir;
}]);

这是有效的JSBin：http://jsbin.com/ICUjuri/2/edit

Answer 2

这是因为“过滤器”可用于“示例应用程序”。模块，因为它是一个依赖项。

Adam Thomas对此是正确的，但依赖于其他自定义项目中的自定义指令，服务和过滤器是一种常见方案。你想在你的DI断言中明确表达。这会导致事情在注入级别中断，而不是在这种情况下使用自定义指令。

//DIRECTIVE
angular.module('directives',['services']).directive('linkBox', ['toDate',function(toDate){
  ...
}]);

有了这个，您可以清楚地知道您需要使用该指令，并且不会轻易错过。这可能需要您调整您声明的日期＆＃39;。

从具有隔离范围的Angular指令访问自定义筛选器

2 个答案: