无法访问angularjs工厂属性

Question

I am trying to build an Angularjs factory, I'm writing the script on seperate module and then inject:

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

but when I try to log a factory's property in the run stage, it's undefined:

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

Here is my factory implementation, did it according to the angularjs documentation:

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

also tried to do it this way:

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

nothing works...

any suggestions?

Answer 1

I think using service would be appropriate here(could use factory as well), as you are messing up to having this reference inside updated method.

Also while logging method you are not returning anything from update method, so any case it is going to print undefined until you return anything. I think you should return controls to see updated controls list from update method.

Code

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