Question

我使用指令来显示html片段。

指令中的templateUrl，能够将片段包含为html文件。

如果我试着打电话，该指令不起作用在内置的ng-repeat指令中（{{snip}}按原样传递，无需替换）：

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

供参考，这是指令：

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

还有一个plunker demo。

非常感谢任何指针。（我的代码中的指令更复杂，我试图得到一个最小的例子，问题是可重现的。）

Answer 1

查看此链接

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 2

在指令执行期间，attrs的

templateUrl param不会被插值。您可以使用以下方式来实现此目的

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

演示：http://plnkr.co/edit/2ofO6m45Apmq7kbYWJBG?p=preview

Answer 3

您可以使用ng-include，观看attrs。像这样：

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 4

刚刚对指令结构进行了更改。我们不是使用ng-repeat渲染所有模板，而是使用指令本身渲染它，因为我们将整个模板数组传递给指令。

<强> HTML

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

<强>指令

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

希望这可以帮到你。感谢。

Answer 5

您似乎正在基于某种逻辑尝试拥有不同的观点并且您使用了templateUrl函数，但是Angular插值无效，以解决此问题

请勿使用templateUrl

那么不使用templateUrl怎么做

像这样

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

希望这简单易懂

Angularjs templateUrl无法绑定ng-repeat中的属性

5 个答案: