angularjs工廠屬性是不可訪問

Question

我試圖建立一個Angularjs工廠， 我在寫單獨的模塊上的腳本，然後注入：

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

但是當我嘗試登錄工廠的財產運行階段，它是不確定的：

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

：

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

這裏是我的工廠實現，根據angularjs文檔做到了

也試圖做這種方式：

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