Angular provider not setting value

Question

I've made my own module, with a provider. I want other users to be able to override the default config:

angular.module('mymodule').provider('mymoduleConfig', [function() {

    var object = {
        theme: 'default'
    };

    var updated = {};

    this.setConfig = function(override) {
        console.log('Config updated...', override);
        updated = override;
    }

    return {
        $get: function() {
            return {
                config: angular.extend(object, updated)
            }
        }
    }
}]);

Within my own app, I include the mymodule and try to use the setConfig, however it doesn't trigger. When I call `

angular.module('example', ['mymodule'])

angular.module('example').config(['mymoduleConfigProvider', function(mymoduleConfigProvider) {
    mymoduleConfigProvider.setConfig({
        theme: 'bootstrap'
    });
}]);

The setConfig never gets called, but I cannot figure out why!

Answer 1

setConfig method should be kept outside the rerurn object and it should be added inside this context of function.

Then it could be accessible from the config phase

Update

The reason behind it was not working is you are explicitly returning an object from your provider which is flushing the this.setConfig method like you were also included $get function in that object that's why it is accessible in your current implementation. I'd suggest you should not return object from provider you should create a this.$get function and then assign then return object from it.

Provider

angular.module('mymodule', []).provider('mymoduleConfig', [function() {

  var object = {
    theme: 'default'
  };

  var updated = {};

  this.setConfig = function(override) {
    console.log('Config updated...', override);
    updated = override;
  }

  this.$get = function() {
    //returning object from `.$get` function
    return {
      config: angular.extend(object, updated)
    }
  }
}]);

Working Plunkr