Question

Angular组件大多是独立的，不会污染全局范围。但是，我想收集应用程序的所有数据并保存。

这个问题有一个共同的方法吗？

Answer 1

我现在正在使用这种方法：

父组件保存对子组件模型的引用
每个子组件都将其模型作为参数/ binding
子组件必须区分域模型和它自己的状态属性

这种技术引入了一些开销，但似乎效果很好。域模型与组件可能想要使用的其他属性之间的区别可以很好地分离关注点。

在代码中，这看起来像这样：

// 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, "");
    }
}

如何从AngularJS中的所有组件收集数据

1 个答案: