Question

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

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

angularjs工厂属性无法访问

1 个答案: