解析数据以在 AngularJs 中使用内部组件

Question

我有一个应用程序，其中主要数据在主状态下使用 ui-router 解析。然后将此数据存储在 service 中，因此我可以通过 component、controller 等访问此数据...

我遇到的问题是在第一次加载期间。由于此数据是通过 $http 请求获取的，当 app 启动时，特别是我的 component，数据尚未准备好，因此 component 有 undefined 数据但无法正确呈现。

我可以使用 $onChange，但由于我没有绑定数据，而是从 service 获取数据，我不知道如何以正确的方式进行。

例如，假设我需要在index.html的footer上填写一些信息，所以我有这样的代码：

index.html

<body>
    [..other elements..]

    <footer></footer>
</body>

footer.component.js

var footer = {
    /* @ngInject*/
    controller: function(storeFactory) {
        this.mainInfo = storeFactory.footerData;
    },
    template: `
        <div class="footer__content">
            {{ $ctrl.mainInfo }}
        </div>
    `
}

angular
    .module(appModule)
    .component('footer', footer);

如果我在component中使用console.log，this.mainInfo是未定义的，但是，如果我设置超时，我可以正确地获取数据。

我知道我可以通过某些方式解决这个问题，例如：

$watch：我知道这不是最佳做法；
获取组件内部的数据，但是会重复一些$http很多次，因为这个问题出现在其他组件中，如weel;
使用 $timeout，但我不知道获取数据需要多少时间，因为它是在后端完成的；
定义一个控制器通过绑定传递数据，然后我可以使用 $onChange，但话又说回来，我会重复很多次；

解决这种情况的更好选择是什么？

Answer 1

如果 storeFactory.footerData 未定义 angular 无法监视更改，因为它无法注入自身以绑定文字。但是，如果您分配 storeFactory 对象 angular 有一个对象，它可以在其中注册其双向数据绑定的东西。

var footer = {
    /* @ngInject*/
    controller: function(storeFactory) {
        this.mainInfo = storeFactory;
    },
    template: `
        <div class="footer__content">
            {{ $ctrl.mainInfo.footerData }}
        </div>
    `
}

请告诉我这是否有效，我遇到过无数这样的解决方案。

另一种方法是使用事件或观察者模式在服务中注册您的组件以进行更新。

解析数据以在 AngularJs 中使用内部组件

Resolving data to use inside components in AngularJs

angularjs

angular-components