AngularJS - switching templateUrl in directive

Question

This is an example of my code where I want to switch a templateUrl. This works only if you refresh the page while holding the data in localstorage or backend.

app.directive('myPanel', ['myService', function(myService) {
    if(myService.isThisTrue()) {
        return {
            restrict: 'E',
            templateUrl: '/views/isTrue.html'
        }
    } else {
        return {
            restrict: 'E',
            templateUrl: '/views/isFalse.html'
        }
    }
}]);

I did not find a decent way yet to do it better. Does anyone have a better solution?

I think this can be answered via this popular question - http://stackoverflow.com/questions/21835471/angular-js-directive-dynamic-templateurl There's two good approaches in that. — sifriday, Sep 28 '16 at 11:19

score 2 · Accepted Answer · answered Sep 28 '16 at 11:35

templateUrl can be a function where you return the url string

app.directive('myPanel', ['myService',function(myService) {
    return {
      restrict: 'E',
      templateUrl: function() {
        return myService.isThisTrue() ? '/views/isTrue.html' : '/views/isFalse.html';
      }
    }
  }
])

AngularJS - switching templateUrl in directive

1 Answers1