动态templateUrl在角度ui-router中解析

时间:2015-03-12 18:35:35

标签: javascript angularjs angular-ui-router

所以现在我有一个完整视图的父指令,所以我可以根据promise的返回状态换出模板。

.directive('myDirective', function(myService) {
    var rootDir = '/path/to/templates';

    return {
         restrict: 'E',
         replace: true,
         controller: controller,
         link: linker,
         template: '<div ng-include="getContentUrl()"></div>'
    };

    function controller($scope) { ... }

    function linker(scope) { 
        myService.getData().then(function(res) {
            scope.getContentUrl = function() {
                var tpl = res.status >= 400 ? '/tplContent.html' : '/tplError.html';
                return rootDir + tpl; 
            };
        });    
    }
})

但是,如果我可以在解析我的angular-ui路径时调用myService.getData()并在我的承诺结算后动态加载templateUrl,这将更加清晰。

1 个答案:

答案 0 :(得分:1)

如果您将getData()的结果分配给范围并绑定到那个?

,该怎么办?
template: '<div ng-include="{{contentUrl}}"></div>'

function linker(scope) { 
    myService.getData().then(function(res) {
        var getContentUrl = function() {
            var tpl = res.status >= 400 ? '/tplContent.html' : '/tplError.html';
            return rootDir + tpl; 
        };

        $scope.contentUrl = getContentUrl();
    });    
}