AngularJS ：实施工厂、服务、指令或其他内容的指南

Question

我是 angularjs 的新手，需要一些关于 angular 实现非常简单的方法的建议。在我的 $scope 中，我需要设置一些字段默认值，而这些默认值在我的控制器中需要多次。

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

这是默认值的示例：

$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"} ]
}]

这是我想调用 "new function":

的示例

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

我的问题是：

我是否应该使用 factory/directive/service（或其他）这个重构？
如何确保函数被调用最初以便默认值可用于字段页面何时加载？

Answer 1

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

我建议您创建一个 constant，因为看起来您有 defaults 数据，这些数据最初具有一定的价值，并且将由用户从前端更改.所以你可以把它放在 angular 常量中，然后那个常量将被 factory/service 访问。 Factory/service 将从其功能中进行必要的操作。要在您的 service/factory 中提供常量，您需要在您的服务中注入常量名称。

通过查看您当前的要求，您不应考虑 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) 这将为您提供默认副本。

控制器

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

Answer 2

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

应使用控制器来设置范围，但默认值应存储为常量并由工厂返回。这里首选工厂模式，因为它是单例。

angular.module('myApp')
    .factory('skillsFactory', function (defaultSkills) {
        var service = {};

        service.getDefaults = function () {
            return defaultSkills;
        };

        return service;
    })
    .constant('defaultSkills', [{
        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"
        }]
    }]);

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

在您的控制器中，调用 $scope.skills = skillsFactory.getDefaults();

angular.module('myApp')
    .controller('skillsCtrl', function ($scope, skillsFactory) {
        $scope.skills = skillsFactory.getDefaults();
    });

AngularJS ：实施工厂、服务、指令或其他内容的指南

AngularJS : Guidance to implement a factory, service, directive or something else

javascript

angularjs

angularjs-service

angularjs-controller

angularjs-factory