Angular JS中的動態配置

Question

我正在創建一個指令來顯示圖表。 我通過一個指令創建模塊的常用模板。對於配置，我決定使用提供者。 我瞭解如何讓應用程序通過提供程序設置我的模塊配置。

但是，我有一個用例是配置可以根據用戶的偏好在運行時更改。 如何讓我的模塊爲客戶端API在運行時修改配置提供一種方法？

是否可以將ProviderConfiguration注入到客戶端控制器中？這種方法是否存在重大缺陷？

當前的代碼模板看起來像這樣

//Provider 
angular.module('foobar', []).provider('foobarConfig', [function() { 
    var config = { 
     //config properties here. 
    } 
    var configurationProvider = { 
     //Getters and Setters that work on 'config'. 
     setProperty(prop, value) { 
      if(config[prop] !== undefined) { 
       config[prop] = value; 
      } 
     }, 
     getProperty(prop) { 
      return config[prop]; 
     }, 
     $get: function() { 
      return this; 
     } 
    } 
    return configurationProvider; 
} 

//Chart Directive. 
angular.module('foobar').directive('foobarChart', ['foobarConfig', function(foobarConfig) { 
    //Can use the foobarConfig here. 
}]); 

angular.module('clientApp', [ 'foobar']) 
.config(['foobarConfigProvider', function(foobarConfigProvider) { 
    //Can provide the initial configuration to the module here. 
    foobarConfigProvider.setProperty("foo", "bar"); 
}]); 

angular.module('clientApp').directive('clientFoo', function() { 

    //What should be done to change foobarConfig here? 
}); 

Answer 1

是的，這是完全用於配置服務的有效配方，可在這兩個配置和運行階段可用，所以foobarConfigProvider.setProperty("foo", "bar")和foobarConfig.setProperty("foo", "bar")可以以同樣的方式被使用。

對於不具有依賴性constant配置服務是更方便的替代：

.constant('foobarConfig', (function() { 
    var config = { 
     // ... 
    }; 

    return { 
     setProperty: function (prop, value) { 
      if(config[prop] !== undefined) { 
       config[prop] = value; 
      } 
     }, 
     getProperty: function (prop) { 
      return config[prop]; 
     } 
    }; 
})()); 

對於具有有限組的配置鍵的ES5相容的溶液，可以使用具有Object.defineProperty和Object.sealconstant對象，這消除了自定義getter/setter函數的需要。 Object.defineProperty可以在初始config對象被重複，所以沒有樣板的描述符代碼是必需的：

.constant('foobarConfig', (function() { 
    var config = { 
     // ... 
    }; 

    var obj = {}; 

    angular.forEach(config, function (value, key) { 
     Object.defineProperty(obj, key, { 
      enumerable: true, 
      writable: true, 
      value: value 
      // no 'get' and 'set' are required if the only purpose for 
      // them is to restrict a set of config keys 
     }) 
    }); 

    Object.seal(obj); 

    return obj; 
})()); 

注意，主要差別（和可能的缺點），用於constant這裏是被急切地定義的服務值，foobarConfig將是不同噴油器的相同物件。通常生產沒有區別，但這可能（或不可能）影響測試。