Question

我正在尝试将一个对象数组传递给一个指令，在指令中使用ngRepeat来输出被转换的html中的传递项。它与here讨论的问题基本相同。

我尝试了一些不同的方法，使用编译和链接功能，但我想我无法围绕范围界定。 petebacondarwin建议的解决方案 - here确实有效，但我需要（想要）将数组传递给指令。

这是我当前的版本 - 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

AngularJS：带有转换内容的指令中的ngRepeat

1 个答案: