从具有隔离作用域的Angular指令访问自定义过滤器

Question

我定义了一个带有隔离作用域的自定义过滤器和指令，但是我不知道为什么当我没有将它注入到指令模块中时，该指令可以访问自定义过滤器（我已经将其注入到应用程序模块中-请参见示例）。

过滤器的作用域规则与其他作用域属性的规则不同吗？或者这个框架在考虑过滤器时是错误的？

工作示例在这里：http://jsbin.com/IRogUxA/6/edit?html,js,output 提前感谢！

- Al R.

Answer 1

这是因为指令是由exampleApp模块创建的根作用域的子级。将services、controllers和directives模块注入到exampleApp中，从子级到根作用域实现了原型继承。如果将来由exampleApp创建的根作用域排除了services模块，就会危险地依赖于toDate过滤器对linkBox指令的可访问性。

Erstad Stephen在他的回答中写的部分是正确的，但他的示例不起作用，因为$injector要求过滤器名称具有Filter后缀，如$filterProvider文档所述。

以下代码可以工作：

//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

- Adam

---

我懂了。 给他答案！ - Erstad.Stephen

Answer 2

这是因为过滤器可用于“exampleApp”模块，因为它是一个依赖项。

Adam Thomas关于此的观点是正确的，但在其他自定义项目中依赖于自定义指令、服务和过滤器是一种常见情况。您希望在DI断言中明确这些内容。这将导致注入级别的问题而不是在使用自定义指令时出现问题。

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

通过这个，你可以清楚地知道需要使用指令的内容，不会轻易错过。这可能需要你调整如何声明“toDate”。

- Erstad.Stephen

---

Erstad - 此答案中列出的代码示例无法按照其输入方式正常工作。请查看我的帖子以了解原因。 - Adam