javascript - angularjs如何动态更改模板url

Question

我的模块中有一个指令。我想根据属性更改 templateUrl。

HTML

    <div test stage="dynamicstage"></div>

模块

angular.module('trial', [])
    .controller('trialCtrl', function ($scope) {
        $scope.dynamicstage = 'Welcome';
    })
    .directive('test', function () {
    return {
        restrict: 'A',
        scope: {
            'stage': '='
        },
        link: function (scope, element, attrs) {
            scope.$watch('stage', function(condition){
                if(stage === 'welcome'){
                   templateUrl: "hello.html";
                }else{
                    different template url...
                };
            });
        }
    }
});

这是行不通的。 templateurl 未加载到 div 中。我想动态更改 templateUrl 这可能吗？

感谢任何帮助。

Answer 1

这在 Angular 中不是很透明。 templateUrl 可以是动态构建模板 URL 的函数，但是在您的情况下，您需要一个范围，在构建 URL 时尚不可用。

你可以在 ngInclude 的帮助下做这样的事情:

app.directive('test', function() {
    return {
        restrict: 'A',
        scope: {
            'stage': '='
        },
        template: '<div ng-include="templateUrl"></div>',
        link: function(scope, element, attrs) {
            scope.$watch('stage', function(condition) {
                if (scope.stage === 'Welcome') {
                    scope.templateUrl = "hello.html";
                } else {
                    scope.templateUrl = "other.html";
                };
            });
        }
    }
});

演示: http://plnkr.co/edit/l1IysXubJvMPTIphqPvn?p=preview