全局效用函数与指令答案

【问题标题】：global utility function vs. directive全局效用函数与指令
【发布时间】：2014-01-09 17:58:43
【问题描述】：

任务：

构建一个实用函数来构建一个可配置的 URL。 URL 模式看起来像这样

/images/<size>/users/<user_id>

可能的解决方案

1. 建立一个指令。它可能如下所示：

<img my-user-img my-size="small" my-user="4711" />

这有点难看，因为我必须添加所有样板来支持多个参数。

2. 构建一个 util/helper 函数。它可能如下所示：

<img ng-src="{{userImg('small', '4711')}}" />

这很难看，因为我必须将函数绑定到 $rootScope 才能在任何地方使用它。

问题

哪种解决方案最接近最佳实践，为什么？ :D

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

1 或 2 都不是。您已经提供了答案！我建议使用具有多个参数的过滤器：请参阅：How do I call an Angular.js filter with multiple arguments?

第一个可能的参数解决方案：

filter('userImage', function(){
  return function(val, size, user){
     return '/images/'+size+'/users/'+user;
  };
});

用法：

{{''|userImage:'small':'4711'}}

可以使用 angular.noop 代替 ''。

如果你不喜欢 '' 作为 noop 表达式，还有另一种可能：

filter('createLink', function(){
  return function(params){
     return '/images/'+params.size+'/users/'+params.user;
  };
});

用法：

{{{size:'small', user:'4711'}|createLink}}

尤其是最后一个解决方案，您可以直接使用域对象而无需任何映射。

【讨论】：

嗯，也许我走错了路，但过滤器在语义上是否正确？至少，它应该过滤一些东西......
我不这么认为。文档指出：“过滤器格式化表达式的值以显示给用户。它们可以在视图模板、控制器或服务中使用，并且很容易定义自己的过滤器。” docs.angularjs.org/guide/filter 有很多过滤器可以做到这一点（日期，货币，json，小写，......）你的问题可以这样描述：“将我的对象格式化为显示给用户的链接” filter 创建了一个字符串，仅此而已。恕我直言，我们使用此字符串作为图像的链接是受法律保护的 :)
为了更接近过滤器定义，我写了一个这样的过滤器：{{4711|userImage:'small'}}
是的！看起来有点棱角分明

【解决方案2】：

Angular services（也是工厂）非常适合实用程序。将你的函数放入服务中，它就可以注入到任何地方的任何控制器中。

myModule.service("CoolThingDoer", function(){
  this.niftyMethod = function(param){ /* ... blah blah ... */}
});

以后

myModule.controller("DisplayController", ['$scope','CoolThingDoer', function($scope,CoolThingDoer){
  //...
  $scope.nifty = CoolThingDoer.niftyMethod("Cool");
  //...
}]);

现在，我同意 Michael 的观点，即您正在寻找更多类似于过滤器的内容，但其他访问此问题的访问者可能希望改为检查我们的服务，而且它们通常更可重复使用和更强大。

【讨论】：