如何從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, ""); 
    } 
}