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')}}" />

这很难看，因为我必须将函数绑定到$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。

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

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

用法：

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

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

Answer 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");
  //...
}]);

现在，我同意迈克尔的观点，你所寻找的更像是过滤器，但是其他访问这个问题的访问者可能想要检查我们的服务，而且它们通常更具可恢复性和强大性。

全局效用函数与指令

2 个答案: