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

Question

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

我希望双向数据绑定可以节省我，但事实并非如此。

复合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

我是否应该使用一种技术来实例化一个组件中的对象，然后与可能碰巧生活在同一页面上的另一个组件共享它，而不是页面上的组件顺序很重要？在这个例子中，时间显然很重要。如果我颠倒我的组件的顺序，它工作正常。但是从图形上来说，我需要先将第二个组件放在第一个组件中，然而在第二个组件中实例化我的服务对象是没有意义的，因为它应该是依赖于服务状态数据的纯粹表示组件。同样，我认为双向数据绑定会检测第一个组件何时更改服务中的对象，但它似乎不会那样工作。

P.S。我对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)