javascript - AngularJS : Guidance to implement a factory, 服务、指令或其他

Question

我是 angularjs 的新手，需要一些关于实现非常简单的东西的 Angular 方式的建议。在我的 $scope 中，我需要设置一些字段默认值，并且在我的 Controller 中多次需要这些默认值。

我希望能够将这些默认值重构到一个公共(public)位置，以精简 Controller 并允许代码重用，但不确定这应该是工厂、指令还是服务。

这是默认值的示例:

$scope.skills = [{
  description: '',
  years: "1",
  level: "0",
  years_values: [
    { id: "1", description: "1" },
    { id: "2", description: "2" },
    { id: "3", description: "3+" }],
  level_values: [
    { id: "0", description: "Starter"},
    { id: "1", description: "Intermediate"},
    { id: "2", description: "Advanced"} ]
}]

这是我想调用“新函数”的地方的示例:

skillSuccess = (resp)->
  Loader.hide();
  $rootScope.current_user = resp;
  #TODO replace this repetition
  $scope.skills = [{
    description: '',
    .... etc

我的问题是:

1. 我是否应该使用工厂/指令/服务(或其他东西)来这个重构？
2. 如何确保函数被调用最初以便默认值可用于字段页面何时加载？

Answer 1

Should I use a factory/directive/service, (or something else) for this refactoring?

我建议你创建一个 constant 因为看起来你有 defaults 数据，它最初有一些值(value)，并且将由用户从前端。所以你可以把它放在 Angular 常量中，然后这个常量将被工厂/服务访问。工厂/服务将从其功能中进行必要的操作。要在您的服务/工厂中提供常量，您需要在您的服务中注入(inject)常量名称。

通过查看您当前的要求，您不应该考虑 directive 组件。

常量

app.constant('defaults', [{
  description: '',
  years: "1",
  level: "0",
  years_values: [
    { id: "1", description: "1" },
    { id: "2", description: "2" },
    { id: "3", description: "3+" }],
  level_values: [
    { id: "0", description: "Starter"},
    { id: "1", description: "Intermediate"},
    { id: "2", description: "Advanced"} ]
}]);

服务

app.service('dataService', function(defaults){
   var dataService = this;
   dataService.defaults = defaults; 
   dataService.defaults = angular.copy(defaults) //will return same copy every-time
   dataService.getDefaults = function(){
     return dataService.defaults; 
   }
   //other method will lie here
})

How do I ensure that the function gets called initially so that the default values are available for the fields when the page loads?

您可以通过使用服务的 getDefaults 方法简单地获取默认值，然后存储检索到的默认值并使用它们进行操作。如果您希望每次都实例化默认值副​​本，请使用 angular.copy(defaults) 这将为您提供默认值的副本。

Controller

app.controller('myCtrl', function($scope, dataService){
   $scope.defaults = dataService.getDefaults(); //this will have defaults
   //...other stuff here...
});