ngRepeat 中的 Angular 指令嵌入

Question

我在 ng-repeat 指令中遇到了嵌入问题。 Angular 在模板中找不到 .transclude 元素，因此不会发生替换。我相信这是因为 ng-repeat 在嵌入时删除了 .transclude 。我想知道如何在 ng-repeat 拿到占位符之前进行替换，或者如何以任何其他方式解决这个问题。

旁注：如果我改用 ng-transclude 指令，那么代码是 按预期工作，但后来我必须使用 $parent {{$parent.item.name}} 来访问我不喜欢的值。

这是我的代码的缩小版：

html

<div mydir="items">
    {{item.name}}
</div>

template.html

<div ng-repeat="item in items">
    <div class="transclude"></div>
</div>

指令

app.directive("mydir" , function(){
    return {
        templateUrl : "template.html",
        transclude : true,
        scope : {
            items: "=mydir"
        },
        link : function($scope , $element , attrs , $ctrl , $transclude){
            $transclude(function($content){
                $element.find(".transclude").replaceWith($content);
            });
        },
    };
})

编译前的预期结果

<div mydir="items">
    <div ng-repeat="item in items">
        {{item.name}}
    </div>
</div>

Answer 1

我认为这里有一个选项可以帮助您到达目的地。基本上，它会抓取您的 html 指令 {{ item.name }} 的内容，并在指令的 compile 函数中构建一个动态模板。

var app = angular.module('plunker', []);

app.directive("mydir" , ['$compile', '$templateRequest', function($compile, $templateRequest){
    return {
        scope : {
            items: "=mydir"
        },
        compile: function($element) {
          var transclude = $element.html();
          $element.html('');
          return function(scope, elem) {
              $templateRequest("template.html").then(function(html){
                  var tpl = angular.element(html);
                  tpl.children('.transclude').append(transclude);
                  $compile(tpl)(scope);
                  elem.append(tpl);
              });
          };
        }
    };
}]);

app.controller('MainCtrl', function($scope) {
  $scope.items = [{
    name: "Item 1"
  },{
    name: "Item 2"
  }]
});

这里是demo。