0

I want to change the template/templateUrl whenever a specific attribute changes. I currently have the following, which does load the initial image correctly, but doesn't change on update.

.directive('parkingImage', ['$compile', function($compile) {
    return {
        restrict: 'E',
        scope: {
            image: '='
        },
        link: function(scope,element,attrs) {
            scope.contentUrl = 'img/parking/'+attrs.templateUrl+'.svg';
            attrs.$observe("template-url", function(v){
                scope.contentUrl = 'img/parking/'+v+'.svg';
            });
        },
        template: '<div ng-include="contentUrl"></div>'
    }
}]);

and in html <parking-image id="parking-image" template-url="Area_2"></parking-image>

I took a look at this Angular.js directive dynamic templateURL , but it doesn't seem to work properly.

b9s
  • 517
  • 4
  • 13

1 Answers1

0

The correct approach is to observe on templateUrl rather than template-url:

attrs.$observe("templateUrl", function(v){
    scope.contentUrl = 'img/parking/'+v+'.svg';
});
Dieterg
  • 16,118
  • 3
  • 30
  • 49