angularjs Свойства фабрики не доступны

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