angularjs - 全局效用函数与指令

Question

任务:

构建实用函数来构建可配置的 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')}}" />

这很丑陋，因为我必须将该函数绑定(bind)到 $rootScope 才能在任何地方使用它。

问题

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

Answer 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 代替 ''。

如果你不喜欢 '' as noop 表达式，还有另一种可能性:

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

用法:

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

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