在 ui-router 中具有已解析值的 templateProvider

Question

我真的不能使用父级的已解析值来声明并使用 tempalteProvider 注入子状态吗？我读了一些文章，人们说这是不可能的。解析值在到达控制器之前不可用。我需要一些值来确定我需要加载哪个模板。

Answer 1

你说的确实是真的。但是您可以通过使用服务来规避它。假设您有一个从服务中获取结果的解决方案：

'resolve': {
    'myData': ['MyService', function (MyService) {
        return MyService.getData();
    }]
}

在该服务中，您可以 cache/store 您的结果：

angular.module('app').factory('MyService', ['$http', function ($http) {
    var data;
    return {
        getData: function () {
            // No data yet, fetch it
            if (!data) {
                return $http({method: 'GET', url: 'a.json'}).then(
                    function (result) {
                        // Store for future use
                        data = result.data;
                        // Return data
                        return data;
                    });
            // Data already present
            } else {
                // Return data
                return data;
            }
        }
    }
}]);

现在在您的子状态中，您可以使用在您的模板提供程序中准备好数据的服务：

'templateProvider': ['$http', 'MyService', function ($http, MyService) {
    var data = MyService.getData();
    return $http.get(data.type + '.html').then(
        function (response) {
            return response.data;
        }
    );
}]

这是 Plunker 上的一个简单的例子：http://plnkr.co/edit/hUGhmGSowV4XEdXfdS0E?p=preview

在 ui-router 中具有已解析值的 templateProvider

templateProvider with resolved values in ui-router

angularjs

angular-ui-router