Question

我处于一种奇怪的情况，我需要为选定的角度元素创建一个动态视图模型。

考虑我的html视图中有三个不同的指令，名为<paragragh>，它们都连接到一个控制器ParagraphController。由于我需要在它们之间共享设置，因此我定义了一个服务来保存名为ParagraphConfig的共享变量，该变量连接到名为ParagraphConfigConroller的控制器。

paragraph.config.js

(function() {

  'use strict'

  angular
    .module('Application')
    .directive('ParagraphConfig', ParagraphConfigService);

  function ParagraphConfigService() {
    var paragraph = {
      text: 'blah blah',
      style: {
        fontWeight: 'normal',
        border: 0
      }
    }

    return {
      get: get
    }

    function get() {
      return paragraph;
    }
  }

})();

config.controller.js - ＆gt; controllerAs: ParagraphConfigViewModel

(function() {

  'use strict'

  angular
    .module('Application')
    .directive('ParagraphConfigController', ParagraphConfigController);

  function ParagraphConfigController( ParagraphConfig.get ) {
    var self = this;
    self.paragraph = ParagraphConfig.get();
  }

})();

paragraph.directive.js

(function() {

  'use strict'

  angular
    .module('Application')
    .directive('paragraph', ParagraphDirective);

  function ParagraphDirective() {
    return {
      restrict: 'E',
      templateUrl: '/path/to/templates/paragraph.html',
      scope: true,
      replace: true,
      require: '^component',
      controller: 'ParagraphController',
      controllerAs: 'ParagraphViewModel'
    }
  }

})();

paragraph.controller.js - ＆gt; controllerAs: ParagraphViewModel

(function() {

  'use strict'

  angular
    .module('Application')
    .directive('ParagraphController', ParagraphController);

  function ParagraphController( ParagraphConfig.get ) {
    var self = this;
    self.paragraph = ParagraphConfig.get();
  }

})();

实际上，我使用ParagraphConfig来分享/更改每个段落的设置。以下是我将设置绑定到每个p标记的方法。

我有paragraph.html和config.html，如下所示。

paragraph.html

<p ng-style="ParaghViewModel.paragraph.style">
  {{ParagraphViewModel.paragraph.text}}
</p>

config.html

<input type="radio" name="font weight" 
ng-model="ParagraphViewModel.fontWeight" value="bold"> Bold

<input type="radio" name="font weight" 
ng-model="ParagraphViewModel.fontWeight" value="normal"> Normal

现在的问题是，当我选择一个段落（我有一个设置窗格，将通过点击每个段落激活）并尝试更改其设置时，它会影响其他段落。

是否有任何解决方案可以通过单击每个段落来创建独特的视图模型？！

Answer 1

如果您只想使用服务的init段落，则可以使用工厂函数;

function ParagraphConfigService() {

    return {
      get: get
    }

    function get() {
      return {
          text: 'blah blah',
          style: {
            fontWeight: 'normal',
            border: 0
          }
       };
    }
  }

如果要将数据与服务同步，则应使用具有多个配置对象的工厂函数

function ParagraphConfigService() {
        var paragraphs = [create(), create(), create()]; // for example as array;
        return {
          get: get
        }

        function get(index){
            return paragraphs[index];
        }

        function create() {
          return {
              text: 'blah blah',
              style: {
                fontWeight: 'normal',
                border: 0
              }
           };
        }
      }

动态创建类似角度对象的视图模型

1 个答案: