angularjs how to change tempate url dynamically

Question

I have a directive in my module. And I want to change the templateUrl based on a attribute.

HTML

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

Module

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

This does not work. The templateurl is not loaded into the div. I want to change the templateUrl dynamically is this possible.

I appreciate any help.

Look at this post: onehungrymind.com/angularjs-dynamic-templates — cheziHoyzer
– cheziHoyzer, Commented Feb 25, 2015 at 11:07

dfsq · Accepted Answer · 2015-02-25 11:10:51Z

This is not very transparent in Angular. templateUrl can be a function to dynamically construct template URL, however in your case you need a scope, which is not yet available at the moment URL is constructed.

You can do something like this with the help of 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";
                };
            });
        }
    }
});

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

Vinay K · Accepted Answer · 2015-02-25 11:12:46Z

Solution1 :

scope.$watch('stage', function(condition){
    var templateUrl;
    if(stage === 'welcome'){
        templateUrl = "hello.html";
    } else{
        templateUrl = "someothertemplate.html";
    };

    //load the template;
    $http.get(templateUrl)
        .then(function (response) {
            // template is loaded.
            // add it and compile it.
            angular.element(element).html(response.data);
            $compile(element.contents())(scope);
        });
});

Solution2: Use ng-include

<div test stage="dynamicstage">
    <div ng-include="templateUrl"></div>
</div>

Inside directive:

scope.$watch('stage', function(condition){
    var templateUrl;
    if(stage === 'welcome'){
        templateUrl = "hello.html";
    } else{
        templateUrl = "someothertemplate.html";
    };

    scope.$parent.templateUrl = templateUrl; // make sure that templateUrl is updated in proper scope
})

Collectives™ on Stack Overflow

angularjs how to change tempate url dynamically

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related