javascript - 无法访问 angularjs 工厂属性

Question

我正在尝试建立一个 Angularjs 工厂， 我在单独的模块上编写脚本，然后注入(inject):

var app = angular.module('myApp', ['ngAnimate', 'ngTouch', 'myModule']);

但是当我尝试在运行阶段记录工厂的属性时，它是未定义的:

console.log(myFactory.update()); // undefined

这是我的工厂实现，是根据 angularjs 文档完成的:

    var myModule = angular.module('myModule', []);

    myModule.factory('myFactory', function() {
    return {
    controls: {
      'text_size'        : 1,           // text size level; default: 1; type: integer; options: [1-5]
      'underline'        : false,      // underline mode state; default: FALSE; type: boolean; options: [true (on), false (off)]
      'zoom'             : 1,         // zoom level; default: 1; type: integer; options: [1-5]
      'contrast'         : null,     // contrast mode; default: null; type: string, options: [null, 'dark', 'light']
      'background_color' : null,    //  background color; default: null; type: string; options: ['black', 'darkgrey', 'grey', 'red', 'orange', 'yellow', 'green', 'lightblue', 'blue', 'purple', 'pink', null]
      'headlines_color'  : null,   // headlines color; default: null; type: string; options: ['black', 'darkgrey', 'grey', 'red', 'orange', 'yellow', 'green', 'lightblue', 'blue', 'purple', 'pink', null]
      'text_color'       : null,  // text color; default: null; type: string; options: ['black', 'darkgrey', 'grey', 'red', 'orange', 'yellow', 'green', 'lightblue', 'blue', 'purple', 'pink', null]
      'focus_indicator'  : {     // focus indicator mode and color;
        'active'         : true,// default: true (on); type: boolean; options: [true (on), false (off)]
        'color'          : 'black', // default: black (change to match website style), type: string; options: ['black', 'darkgrey', 'grey', 'red', 'orange', 'yellow', 'green', 'lightblue', 'blue', 'purple', 'pink', null]
      },
      'media_controls'   : false,// default: false (change to match website style), type: boolean; options: [true (on), false (off)]
    },
    update: function(control, value) {
      this.controls[control] = value;
    }
  }
    });

也尝试过这样做:

var myModule = angular.module('myModule', []);

myModule.factory('myFactory', function() {
  var finalInstance = function() {
    this.controls = {
      'text_size'        : 1,           // text size level; default: 1; type: integer; options: [1-5]
      'underline'        : false,      // underline mode state; default: FALSE; type: boolean; options: [true (on), false (off)]
      'zoom'             : 1,         // zoom level; default: 1; type: integer; options: [1-5]
      'contrast'         : null,     // contrast mode; default: null; type: string, options: [null, 'dark', 'light']
      'background_color' : null,    //  background color; default: null; type: string; options: ['black', 'darkgrey', 'grey', 'red', 'orange', 'yellow', 'green', 'lightblue', 'blue', 'purple', 'pink', null]
      'headlines_color'  : null,   // headlines color; default: null; type: string; options: ['black', 'darkgrey', 'grey', 'red', 'orange', 'yellow', 'green', 'lightblue', 'blue', 'purple', 'pink', null]
      'text_color'       : null,  // text color; default: null; type: string; options: ['black', 'darkgrey', 'grey', 'red', 'orange', 'yellow', 'green', 'lightblue', 'blue', 'purple', 'pink', null]
      'focus_indicator'  : {     // focus indicator mode and color;
        'active'         : true,// default: true (on); type: boolean; options: [true (on), false (off)]
        'color'          : 'black', // default: black (change to match website style), type: string; options: ['black', 'darkgrey', 'grey', 'red', 'orange', 'yellow', 'green', 'lightblue', 'blue', 'purple', 'pink', null]
      },
      'media_controls'   : false,// default: false (change to match website style), type: boolean; options: [true (on), false (off)]
    };

    this.update = function(control, value) {
      this.controls[control] = value;
    };
  };

  return new finalInstance();
});

没有任何效果...

有什么建议吗？

Answer 1

我认为在这里使用服务是合适的(也可以使用工厂)，因为您在更新的方法中引用了 this 。

此外，在记录方法时，您不会从更新方法返回任何内容，因此无论如何，它都会打印 undefined 直到您返回任何内容。我认为您应该返回控件以通过更新方法查看更新的控件列表。

代码

var myModule = angular.module('myModule', []);

myModule.service('myFactory', function() {
  var self = this; //this self will ensure you are accessing `this` correctly
  self.controls = {
    'text_size': 1, // text size level; default: 1; type: integer; options: [1-5]
    'underline': false, // underline mode state; default: FALSE; type: boolean; options: [true (on), false (off)]
    'zoom': 1, // zoom level; default: 1; type: integer; options: [1-5]
    'contrast': null, // contrast mode; default: null; type: string, options: [null, 'dark', 'light']
    'background_color': null, //  background color; default: null; type: string; options: ['black', 'darkgrey', 'grey', 'red', 'orange', 'yellow', 'green', 'lightblue', 'blue', 'purple', 'pink', null]
    'headlines_color': null, // headlines color; default: null; type: string; options: ['black', 'darkgrey', 'grey', 'red', 'orange', 'yellow', 'green', 'lightblue', 'blue', 'purple', 'pink', null]
    'text_color': null, // text color; default: null; type: string; options: ['black', 'darkgrey', 'grey', 'red', 'orange', 'yellow', 'green', 'lightblue', 'blue', 'purple', 'pink', null]
    'focus_indicator': { // focus indicator mode and color;
      'active': true, // default: true (on); type: boolean; options: [true (on), false (off)]
      'color': 'black', // default: black (change to match website style), type: string; options: ['black', 'darkgrey', 'grey', 'red', 'orange', 'yellow', 'green', 'lightblue', 'blue', 'purple', 'pink', null]
    },
    'media_controls': false, // default: false (change to match website style), type: boolean; options: [true (on), false (off)]
  };
  self.update = function(control, value) {
    self.controls[control] = value; //accessing correct controls object
    return self.controls; //returning controls
  };
});