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

时间:2015-03-09 18:52:22

标签: angularjs angular-ui-router

我是否可以使用来自父级的已解析值来说明并使用tempalteProvider注入子状态?我读了一些文章,人们说它无法完成。在到达控制器之前,已解决的值将无法使用。我需要一些值来确定我需要加载哪个模板。

1 个答案:

答案 0 :(得分:4)

你所说的确实如此。但是你可以通过使用服务来规避它。假设您有一个决定从服务中获取结果:

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

在该服务中,您可以缓存/存储结果:

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;
            }
        }
    }
}]);

现在在您的childstate中,您可以使用在templateProvider中准备好数据的服务:

'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