angularjs 发送要更新的Angular 组件

kx5bkwkv  于 8个月前  发布在  Angular
关注(0)|答案(2)|浏览(96)

使用AngularJS组件向组件发送更新信号的最佳方式是什么?
假设我有myComponent,我想告诉它更新它的数据,我该如何实现?如果可能的话,我不喜欢使用$emit$broadcast,而是选择尽可能类似于Angular2的东西。
目前,我传入一个控件对象,该控件对象带有组件实现的回调,但我不喜欢这种方法。
我的另一个概念是通过单向绑定机制发出信号,但感觉非常笨拙。

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

我的控制器会

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

有没有更好、更现代的Angular方法来做到这一点?

澄清

有人要求澄清:
假设你有两个组件

  • 人物列表
  • personEditor

由于它们的使用方式,它们都从服务器获得一个“人”列表,因此没有共享(绑定)的公共人列表。
假设personEditor更改了一个人名并将其保存到服务器。
如何告诉peopleList组件它需要更新

66bbxpm5

66bbxpm51#

在person编辑器组件中,我将使用绑定添加对父列表的可选引用。例如:

bindings: { parentList: '<?' }

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

wpx232ag

wpx232ag2#

这听起来像是一个负责从服务器获取人员列表的服务的完美时机。你的两个棋子会使用相同的服务来获取信息。然后,如果一个更新了什么,另一个(使用相同的数据源)将自动看到更新。举例来说:

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
    }
}

那么peopleEditorpeopleList都可以引用相同的数据源。只需将peopleService包含到控制器中并将其用作数据源。举例来说:

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

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

    vm.people = peopleService.people;

    return vm;
}

相关问题