Angularjs templateUrl fails to bind attributes inside ng-repeat

问题

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 work, if I try to call inside a builtin ng-repeat directive ({{snip}} is passed as is, without substitute):

div ng-repeat="snip in ['snippet1.html','snippet2.html']">
  <my-template snippet="{{snip}}"></my-template>
</div>

For reference, here is the directive:

app.directive("myTemplate", function() {
return {
    restrict: 'EA',
    replace: true,
    scope: { snippet: '@'},
    templateUrl: function(elem, attrs) {
      console.log('We try to load the following snippet:' + attrs.snippet);
      return attrs.snippet;
    }
  };
});

And also a plunker demo.

Any pointer is much appreciated. (the directive is more complicated in my code, I tried to get a minimal example, where the issue is reproducible.)

回答1:

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

回答2:

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

回答3:

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

回答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.

回答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

来源：https://stackoverflow.com/questions/28414568/angularjs-templateurl-fails-to-bind-attributes-inside-ng-repeat

标签

angularjs

angularjs-directive

angularjs-ng-repeat