爲類似的角度對象動態創建視圖模型

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