Angularjs 全局效用函数与指令

任务：

构建一个实用函数来构建一个可配置的URL。URL模式如下所示

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

/images//用户/

可能的解决方案

一,。 建立一个指令。它可以如下所示：

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

这很难看，因为我必须将函数绑定到

$rootScope

才能在任何地方使用它

问题

---

哪种解决方案最接近最佳实践？为什么D既不是1也不是2。你有提供的答案！我建议使用具有多个参数的过滤器：请参阅：

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

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

用法：

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

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

可以使用angular.noop而不是“”

如果您不喜欢“”作为noop表达式，则还有另一种可能性：

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

用法：

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

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

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

（也是工厂）对于实用工具非常有用。将您的函数放入服务中，它就可以注入到任何地方的任何控制器中

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

后来

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

---

现在，我同意Michael的观点，你所寻找的更多的是一个过滤器，但是其他来问这个问题的访问者可能会想检查我们的服务，而这些服务通常更具可恢复性和健壮性。

Mh，也许我走错了方向，但过滤器的语义正确吗？至少，它应该过滤一些东西……我认为不是。文档中说：“过滤器将表达式的值格式化以显示给用户。它们可以用于视图模板、控制器或服务中，并且很容易定义您自己的过滤器。”有很多过滤器可以做到这一点（日期、货币、json、小写等）。您的问题可以这样描述：“将我的对象格式化为显示给用户的链接”过滤器会创建一个字符串，它只会创建一个字符串。我认为我们使用这个字符串作为图像的链接是受法律保护的：）为了更接近过滤器的定义，我编写了一个过滤器，如下所示：

{{4711 | userImage:'small'}

yepp！看起来很有棱角