Question

我的应用程序中有一个网址，需要根据解析调用的结果加载两个模板中的一个，如下所示：

app.config(function($routeProvider) {
    $routeProvider.
        when('/someurl', {
            resolve: {
                someData: function(dataService) {
                    var data = dataService.loadData();

                    // data has a .type field that determines which template should be loaded

                    return data;
                }
            },
            templateUrl: function(routeParams) {
                // return a path based on the value of data.type in the someData resolve block
            }
        })
});

我有没有办法根据someData resolve返回的内容设置templateUrl？

Answer 1

所以我想出了如何使用ui-router做到这一点 - 感谢m59指点我。

以下是使用ui-router执行此操作的方法：

app.config(function($stateProvider) {
    $stateProvider
        .state('someState'
            url: '/someurl',
            template: '<ui-view>',
            resolve: {
                someData: function(dataService) {
                    var data = dataService.loadData();

                    // data has a .type field that determines which template should be loaded

                    return data;
                }
            },
            controller: function($state, someData) {
                $state.go('someState.' + someData.type);
            }
        })
        .state('someState.type1', {
            templateUrl: 'someTemplate1.html',
            controller: 'Type1Controller'
        })
        .state('someState.type2', {
            templateUrl: 'someTemplate2.html',
            controller: 'Type2Controller'
        })
});

有一个处理结果的父状态，然后根据它获得的信息重定向到子状态。子州没有网址，因此无法直接加载。

基于$ routeProvider的动态模板解析

1 个答案: