Question

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

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

窗格模板（精简版）：

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

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

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

Answer 1

您可能需要模型中的数组，并使用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' });
  };
});

Answer 2

我不确定你是如何将它附加到身体上的，但是为了告诉你如何做到这一点，我认为它只是你拥有的一个元素。

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

为了立即处理您的指令，您必须告诉$compile

您可以通过将以下内容直接附加到someOtherElement：

来执行此操作

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

我放了$ scope或scope，因为我不确定你附加它的位置是在控制器中，还是在指令中。

如果你可以粘贴一个有用的jsFiddle。

没有必要编译，我想你应该看一些关于如何使用角度的教程视频。看看你有的jsfiddle，你不需要jquery。你也有一个指令连接在窗格元素上，但是在那个指令中你有另一个窗格元素，所以它正在做一个递归循环和崩溃。我已经修好了小提琴来做你需要的事情：

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

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

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

使用AngularJS，如何将指令附加到元素？

2 个答案: