Angularjs templateUrl fails to bind attributes inside ng-repeat

Question

I\'m using directive to display html snippets.

And templateUrl inside the directive, to be able to include snippets as html file.

The directive does not wor

Answer 1

You can use ng-include, watching the attrs. Like this:

app.directive("myTemplate", function() {
    return {
        restrict: 'E',
        replace: true,
        link: function(scope, elem, attrs) {
            scope.content = attrs.snippet;
            attrs.$observe("snippet",function(v){
                scope.content = v;
            });
        },
        template: "<div data-ng-include='content'></div>"
    };
});

Answer 2

attrs param for templateUrl is not interpolated during directive execution. You may use the following way to achieve this

app.directive("myTemplate", function() {
  return {
    restrict: 'EA',
    replace: false,
    scope: { snippet: '@'},
    template: '<div ng-include="snippet"></div>'
  };
}); 

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

Answer 3

Check out this link

http://plnkr.co/edit/TBmTXztOnYPYxV4qPyjD?p=preview

app.directive("myTemplate", function() {
  return {
    restrict: 'EA',
    replace: true,
    scope: { snippet: '=snippet'},
    link: function(scope, elem, attrs) {
      console.log('We try to load the following snippet:' + scope.snippet);
    },
    template: '<div ng-include="snippet"></div>'
  };
})

Answer 4

Just made changes in directive structure. Instead of rendering all templates using ng-repeat we will render it using directive itself, for that we will pass entire template array to directive.

HTML

<div ng-init="snippets = ['snippet1.html','snippet2.html']">
    <my-template snippets="snippets"></my-template>
</div>

Directive

angular.module('myApp', [])
.controller('test',function(){})
    .directive("myTemplate", function ($templateCache, $compile) {
    return {
        restrict: 'EA',
        replace: true,
        scope: {
            snippets: '='
        },
        link: function(scope, element, attrs){
            angular.forEach(scope.snippets, function(val, index){
                //creating new element inside angularjs
                element.append($compile($templateCache.get(val))(scope));
            });
        }
    };
});

Working Fiddle

Hope this could help you. Thanks.

Answer 5

it seems you are trying to have different views based on some logic and you used templateUrl function but Angular interpolation was not working, to fix this issue

don't use templateUrl

so how to do it without using templateUrl

simply like this

app.directive("myTemplate", function() {
    return {
        link: function(scope, elem, attrs) {
           $scope.templateUrl = '/ActivityStream/activity-' + $scope.ativity.type + '.html'
        },
        template: "<div data-ng-include='templateUrl'></div>"
    };
});

hope this is simple and esay to understand