AngularJSのすべてのコンポーネントからデータを収集する方法

Question

角度コンポーネントは、ほとんどが自己完結型であり、グローバルスコープを汚染しません。しかし、私はアプリケーションのすべてのデータを収集して保存したいと思います。

この問題には一般的なアプローチがありますか？

Answer 1

私は今、このアプローチを使用しています：

• を親コンポーネントは、それぞれの子コンポーネント子コンポーネント
• のモデルへの参照を保持しているパラメータ/
• を結合子コンポーネントの間の個別に持っているとして、そのモデルを渡され、ドメインモデルとそれ自身の状態属性

この手法ではオーバーヘッドが発生しますが、うまくいくようです。ドメインモデルと、コンポーネントが使用したいかもしれない他の属性との間の記述は、心配の良い分離を可能にする。

// parent template 

<div class="message-list"> 
    <message ng-repeat="message in $ctrl.messages" model="message" 
      on-delete="$ctrl.removeMessage(message)"> 
    </message> 
</div> 

---

// parent component 

.component('messagelist', { 
    templateUrl: 'core/messagelist/messagelist.html', 
    controller: MessageListCtrl 
}); 

function MessageListCtrl() { 
    var message1 = { 
     text: "message numero uno" 
    }; 
    var message2 = { 
     text: "message numero dos" 
    }; 
    this.messages = [message1, message2]; 

    // (...) 
} 

---

// child template 

<input type="text" ng-model="$ctrl.model.id" /> 
<textarea ng-model="$ctrl.model.text"></textarea> 

---

// child component 

.component('message', { 
    templateUrl: 'core/message/message.html', 
    controller: MessageCtrl, 
    bindings: { 
     model: "=", 
     onDelete: "&" 
    } 
}) 

function defaultValue(current, defaultVal) { 
    return typeof current !== "undefined" ? current : defaultVal; 
} 

function MessageCtrl() { 
    this.$onInit = function() { 
     this.model.id = defaultValue(this.model.id, ""); 
     this.model.text = defaultValue(this.model.text, ""); 
    } 
} 

：

のコードでは、これは次のようになります