Question

使用AngularJS组件发信号通知组件更新的最佳方式是什么？

说我有myComponent并且我想告诉它更新其数据，我将如何实现这一目标？如果可能，我宁愿不使用$emit或$broadcast，而是选择尽可能类似于Angular2的内容。

目前我传入一个控件对象，其中包含组件实现的回调，但我不喜欢这种方法。

我的另一个概念是通过单向绑定机制发出信号，但感觉非常黑客。

<my-component update="$ctrl.shouldUpdate"></my-component>

我的控制器会这样做

function update(){
    this.shouldUpdate = Math.rand();
}

是否有更好，更现代的Angular方法来做到这一点？

澄清

有些人要求澄清：

想象一下，你有两个组件

peopleList
personEditor

由于它们的使用方式，它们都从服务器获取“人员”列表，因此没有共享（绑定），常见的人员列表。

想象一下，personEditor会更改人名并将其保存到服务器。

如何告诉peopleList组件需要更新

Answer 1

在人物编辑器组件中，我将使用绑定向父列表添加可选引用。类似的东西：

    bindings: { parentList: '<?' }

然后，当您在人员编辑器组件中更新时，检查是否存在parentList并相应地更新。您可以对其进行设置，以便在父级中指定方法来调用并将更新的数据传递给它。

Answer 2

这听起来像是负责从服务器获取人员列表的服务的最佳时间。您的两件作品都将使用相同的服务来获取信息。然后，如果一个更新某个东西，另一个（使用相同的数据源）将自动查看更新。例如：

angular
    .module('app')
    .service("peopleService", peopleService);

peopleService.$inject = ["$http"];
function peopleService($http) {
    var svc = this;

    svc.people = [];

    svc.getPeople = getPeople;
    svc.updatePerson = updatePerson;

    return svc;

    function getPeople() {
        //$http call to get people
    }

    function updatePerson(person) {
        //some call to the server

        //update the javascript objects
    }
}

然后，peopleEditor和peopleList都可以引用相同的数据源。只需将peopleService包含在控制器中，并将其用作数据源。例如：

angular
    .module('app')
    .controller('mainController', mainController);

mainController.$inject = ['peopleService'];
function mainController(peopleService) {
    var vm = this;

    vm.people = peopleService.people;

    return vm;
}

要更新的信号角度组件

2 个答案: