javascript - 将服务中的数据暴露给同一页面上的组件时的 AngularJS 计时问题

Question

我正在尝试在复合页面上使用多个组件并从公共(public)服务中引用数据。问题是我试图从第一个组件中实例化服务中的对象，然后在第二个组件中引用它；如果我将第二个组件放在第一个组件之前，则我的值对象尚未实例化，第二个组件将无法显示任何内容。

我希望双向数据绑定(bind)能拯救我，但事实并非如此。

复合 HTML

<second-component></second-component>
<first-component></first-component>

第一个组件

angular.
module('simple').
component('firstComponent', {
    template: "<h3>Component 1</h3><ul ng-repeat='val in $ctrl.someVals'><li>{{val}}</li></ul>",
    controller: function(factory) {
        'use strict';
        // Responsible for creating an object in the service
        factory.changeData();
        this.someVals = factory.vals;
    }
});

第二部分

angular.
module('simple').
component('secondComponent', {
    template: "<h3>Component 2</h3><ul ng-repeat='val in $ctrl.someVals'><li>{{val}}</li></ul>",
    controller: function(factory) {
        'use strict';
        // As a sub-component, secondComponent depends on an object being present in the service. This
        // will be created by firstComponent, which will reside on the same page.           
        this.someVals = factory.vals;
    }
});

工厂服务

angular.
module('simple').
factory('factory', function() {
    var data = {};
    data.vals = {};
    data.changeData = function() {
        data.vals = {
            "a": 11,
            "b": 22,
            "c": 33
        };
    };
    return data;
});

我希望看到组件 2 和组件 1 在被组件 1 更改后引用相同的数据:

组件 2

• 11
• 22
• 33

组件 1

• 11
• 22
• 33

相反，我看到:

组件 2

组件 1

• 11
• 22
• 33

我应该使用一种技术来实例化一个组件中的对象，然后与可能恰好位于同一页面上并且不考虑页面上组件顺序的另一个组件共享它吗？在这个例子中，时机显然很重要。如果我颠倒我的组件的顺序，它工作正常。但是从图形上讲，我需要我的第二个组件先行，并且从第二个组件内部实例化我的服务对象没有意义，因为它应该是一个依赖于服务状态数据的纯粹的表示组件。同样，我认为双向数据绑定(bind)会检测到第一个组件何时更改服务中的对象，但它似乎无法那样工作。

附言我是 AngularJS 的新手。我读了很多很棒的文章，也看过一些很棒的视频；非常欢迎您对引用资料或教程提出建议!

Answer 1

根据您的要求，您需要在 中再次调用该服务。通过 $emit ，您可以从第一个组件向第二个组件发送消息，然后再次调用服务函数。第一个组件

factory.changeData();
notify();
this.someVals = factory.vals;
function notify(){
 $rootScope.$broadcast('notifier', message);
}

第二部分

function updateVals() {
 this.someVals = factory.vals;
}
$scope.$on('notifier', updateVals)