AngularJS：包含重復內容的ngRepeat指令

Question

我正在嘗試將對象數組傳遞給指令，請在指令內部使用ngRepeat將輸出的項目輸出到已包含HTML中。 這基本上是這里討論的相同問題。

我嘗試了一些不同的方式，使用了compile和link函數，但是我想我無法確定范圍。 從petebacondarwin建議的解決方案- 在這里工作，但我需要（希望）數組傳遞到指令。

這是我當前的版本-Plunker

指示

(function() {
  "use strict";

  function MyDirective() {
    return {
      restrict: "E",
      scope: {
        items: "="
      },
      link: function link(scope, element, attrs) {
        var children = element.children();

        var template = angular.element('<div class="item" ng-repeat="item in items"></div>');
        template.append(children);

        var wrapper = angular.element('<div class="list"></div>');
        wrapper.append(template);

        element.html('');
        element.append(wrapper);
      }
    };
  }

  angular
    .module("app.MyDirective", [])
    .directive("myDirective", [MyDirective]);

}());

HTML

<my-directive items="main.items">
  <h1>{{item.title}}</h1>
  <p>{{item.content}}</p>
</my-directive>

謝謝

Answer 1

該指令內部的代碼未編譯，因此對Angular不可見。 這是由於以下事實造成的：代碼沒有被覆蓋，而是在指令中將其刪除並替換了。

為了使它對Angular可見，您應該在link的末尾添加以下代碼：

$compile(wrapper)(scope);

這將使用新的代碼包裝器，對其進行編譯並將其鏈接到scope

更新的plunkr：

http://plnkr.co/edit/9w7m4m4Uo0bShokz9uRR?p=preview