同様の角度オブジェクトのビューモデルを動的に作成

Question

選択した角度要素のオンザフライビューモデルを作成する必要があるという奇妙な状況に陥っています。

私のHTMLビューには、<paragragh>という3つの異なる指示があり、それらはすべて1つのコントローラParagraphControllerに接続されています。私はそれらの間で設定を共有する必要があるので、私は、というコントローラーに接続されているParagraphConfigという名前の共有変数を保持するサービスを定義しました。 >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

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

実際、私は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 
       } 
      }; 
     } 
     }