Question

我对angularjs很新，需要一些关于实现非常简单的角度方式的建议。在我的$ 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"} ]
}]

以下是我想称之为“新功能”的示例：

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

我的问题是：

我应该使用工厂/指令/服务，（或其他）这个重构？
如何确保调用该函数最初，以便默认值可用于字段当页面加载？

Answer 1

我应该使用工厂/指令/服务，（或其他）重构？

我建议您创建一个constant，因为看起来您拥有defaults数据，这些数据最初具有某些价值，并且将由用户从前端更改。因此，您可以将其置于角度常数中，然后工厂/服务将访问该常量。而工厂/服务将从其功能中进行必要的操作。要在服务/工厂中保持常量，您需要在服务中注入常量名称。

通过查看您当前的要求，您不应该考虑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
})

如何确保最初调用该函数，以便在页面加载时字段可以使用默认值？

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

<强>控制器

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

Answer 2

我应该使用工厂/指令/服务，（或其他）进行重构吗？

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

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

如何确保最初调用该函数，以便在页面加载时字段可以使用默认值？

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

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

AngularJS：实施工厂，服务，指令或其他方面的指南

2 个答案: