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

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