2

我正在尝试将对象数组传递给指令，在指令内部使用 ngRepeat 将传递的项目输出到嵌入的 html 中。这与这里讨论的问题基本相同。

我尝试了一些不同的方法，使用编译和链接功能，但我想我无法围绕范围界定。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>

谢谢

4

1 回答 1

4

指令中的代码没有被编译，因此它对 Angular 来说是不“可见的”。这是因为代码没有被嵌入，而是在指令中被删除和替换。

为了让 Angular “可见”，你应该在末尾添加这行代码link：

$compile(wrapper)(scope);

这采用新的代码包装器，对其进行编译并将其链接到scope

更新的 plunkr：

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

于 2014-11-27T10:52:35.490 回答