承诺数据不会在路由状态更改时呈现 - UI 路由器答案

【问题标题】：Promise data not rendering on route state changes - UI router承诺数据不会在路由状态更改时呈现 - UI 路由器
【发布时间】：2016-10-09 03:23:00
【问题描述】：

例如，home route 显示 home feed。在初始控制器初始化和页面重新加载时。 Feed 数据在视图中绑定和呈现。

问题：

在以下情况下数据不会在视图中呈现：
1. 任何网站导航 - 例如使用ui-sref('home.feed')
2. 重定向回state('home.feed') 的功能行为。即上传图片功能：
  - 文件输入后（选择文件/图像）在添加图片状态下预览图像
  - 添加图片状态有上传功能。然后重定向回主页。

控制器代码

function HomeController(currenAuth, feeds) {
    var vm = this;
    vm.pixData = [];


    ///// Controller activation

    activate();


    function activate() {
        if (currentAuth) {
            getHomeFeed();
        }
    }


    ///// Controller methods

    function getHomeFeed() {
        return feeds.showHomeFeed().then((results) => {
            if (results) {
                hideNoPostsContainer();
                return vm.pixData = results[0];
            }
        });
    }

}

vm.pixData用于视图中的ng-repeat

试图找出最佳实践模式。确保数据的呈现。

我看到的其他要添加的选项是：

$rootscope.$on('$statechangesuccess', ...
在路由配置中解析属性

对此进行研究，没有关于它的确切信息。阅读 John Papa route-resolve-and-controller-activate-in-angularjs 的文章。在那篇文章中，它提到在我正在使用的控制器中使用解析或激活模式。但不建议同时使用。

更新

使用 resolve 属性似乎是确定的方法。

使用toddmotto.com/resolve-promises-in-angular-routes/ 中的模式，到目前为止它似乎工作顺利，但是你什么时候想直接在控制器中使用承诺代码？

不确定为什么您永远不想使用 resolve 属性？

路由器配置代码

.state('home.feed', {
                url: '',
                views: {
                    content: {
                        templateUrl: 'app/spaPages/home.html',
                        controller: 'HomeController',
                        controllerAs: 'hc',
                        resolve: {
                            'currentAuth': ['$firebaseAuth', ($firebaseAuth) => {
                                return $firebaseAuth().$waitForSignIn();
                            }],
                            '_pixData': ['feeds', (feeds) => {
                                return feeds.showHomeFeed().then((results) => {
                                    if (results) {
                                        console.log('called from router resolve');
                                        return results[0];
                                    }
                                });
                            }]
                        }
                    }
                }
            })

控制器代码

.controller('HomeController', HomeController);

function HomeController(currenAuth, _pixData) {
    var vm = this;
    vm.pixData = _pixData;
}

【问题讨论】：

显示feeds.showHomeFeed() 的代码以及正在发送的数据结构。需要看看那个函数返回什么
@charlietfl 谢谢。该函数返回一个数据数组 - 典型的 ng-repeat 数据。正在返回数据这不是我认为的问题。想尽量保持问题的清洁。对我来说，问题是我可以带走并始终使用的角度模式。刚刚使用了托德座右铭文章中的这种模式，即使在我提到我遇到问题的情况下，它似乎也能始终如一地工作。 toddmotto.com/resolve-promises-in-angular-routes
更正/澄清〜从上面'对我来说，问题是我可以带走并始终使用的角度模式'解释它。 在所有场景中呈现，即。导航离开并返回视图，和/或上传视图等功能使用 state.go() 重定向到提要视图
好吧，它会基于解析...只要请求成功。您还必须考虑错误处理......当解决因任何原因被拒绝时
是的，我本能地担心会污染或必须像 resolve 属性中的代码一样正确控制控制器。我认为这是我总体上的保留，并且仍然保留。但在这一点上，我不确定另一种有效的模式。奇怪的是它没有被更多地谈论。也许我错过了什么

标签： javascript angularjs firebase firebase-authentication

【解决方案1】：

关于无法在路由更改时呈现承诺数据的原始问题的答案

此时可以考虑回答。

使用 resolve 属性有效。

但仍然想知道对于承诺解决和干净的 Angular 开发来说，最佳模式是什么或最佳实践模式。可能会稍后再提出问题。

【讨论】：