0

我是 Angular 的新手，正在尝试了解如何动态创建新元素。我有一个名为“窗格”的元素指令，它用模板替换窗格标记。

<pane ng-controller="AreaCtrl"></pane>

窗格模板（精简）：

<div>
    <section></section>
    <div class="subs"></div>
</div>

当我单击部分标签内的项目时，如果单击的项目的“窗格”不存在，我想在 div 内附加另一个“窗格”，其中 class="subs"。我无法获取附加的窗格标记来调用指令并被模板替换。对于 Angular 新手来说，正确方向上的任何一点都很棒。

这是一个简单的 jsfiddle：http: //jsfiddle.net/n9vXz/1/

4

2 回答 2

2

您可能希望模型中有一个数组，带有 ng-repeat 指令：

  <div>
    <a href="#" ng-click="addItem()">Add Item</a>
    <section></section>
    <div class="subs">
      <pane ng-repeat="item in list"></pane>
    </div>
  </div>

JS：

app.controller("AreaCtrl", function($scope){
  $scope.items = [{ name: 'item1' }];
  $scope.addItem = function(){
    $scope.items.push({ name: 'newItem' });
  };
});
于 2013-05-02T20:06:23.457 回答
0

我不确定你是如何将它附加到身体的，但为了向你展示如何做到这一点，我假设它只是你拥有的一个元素。

var newPaneElement = .....
someOtherElement.append(newPaneElement);

为了现在处理您的指令，您必须告诉它$compile

您可以通过在将其附加到 someOtherElement 后直接运行以下命令来执行此操作：

$compile(newPaneElement)($scope OR scope);

我放置 $scope 或 scope 是因为我不确定您将其附加到的位置是在控制器中还是在指令中。

如果您可以粘贴一个 jsFiddle 会有所帮助。

无需编译，我认为您应该观看一些有关如何使用 Angular 的教程视频。查看您拥有的 jsfiddle，您不需要 jquery。此外，您在窗格元素上有一个指令连接，但是在该指令中您有另一个窗格元素，因此它正在执行递归循环并崩溃。我已经修复了小提琴来做你需要的事情：

JsFiddle http://jsfiddle.net/BcvPz/1/

使用 ng-repeat 然后你可以让窗格元素在任何地方重复

JsFiddle http://jsfiddle.net/BcvPz/2/

于 2013-05-02T19:35:07.640 回答