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