在AngularJS中动态添加标记

全部：

有没有办法在AngularJS中动态添加标记（特别是自定义标记）

我最近创建了一个自定义标记，类型如下：

<mytag type="small" />

我正试图在一个更大的元素中管理它。我想做的是在div元素中放置一个按钮，按下该按钮后，将在div中创建一个新的mytag元素

换句话说，给定初始页面组成：

<div ng-controller="tagControl">
   <div id="tagdiv">
      <mytag type="small" />
   </div>
   <div id="Controls">
      <button ng-click="addTag()">Add New Tag</button>
      <button ng-click="clearTags()">Clear All Tags</button>
   </div>
</div>

添加新标签
清除所有标签

我想在tagControl的addTag（）函数中添加一些东西，每当按下“添加新标签”按钮时，它都会添加一个新的mytag标签；我想在clearTags（）函数中添加一些东西，当按下“清除所有标签”按钮时，它会删除所有添加的标签

使用AngularJS可以吗？如果没有，可以使用第三方库来完成吗？在这两种情况下，如何做到这一点

---

提前感谢您提供的任何见解…

您需要从MVC而不是DOM操作的角度来思考。您希望显示的

中有多少应该由模型中的某些内容驱动。然后您的HTML将如下所示：

<div ng-controller="tagControl">
  <div id="tagdiv">
     <mytag type="small" ng-repeat="foo in items" />
  </div>
  <div id="Controls">
     <button ng-click="addTag()">Add New Tag</button>
     <button ng-click="clearTags()">Clear All Tags</button>
  </div>
</div>

添加新标签
清除所有标签

---

然后您的addTag（）方法将只添加到

项

模型中，clearTags（）将清除列表。Angular将在您更新模型时为您添加标记

您需要考虑MVC而不是DOM操作。您希望显示的

中有多少应该由模型中的某些内容驱动。然后您的HTML将如下所示：

<div ng-controller="tagControl">
  <div id="tagdiv">
     <mytag type="small" ng-repeat="foo in items" />
  </div>
  <div id="Controls">
     <button ng-click="addTag()">Add New Tag</button>
     <button ng-click="clearTags()">Clear All Tags</button>
  </div>
</div>

添加新标签
清除所有标签

然后您的addTag（）方法将只添加到

项

模型中，clearTags（）将清除列表。Angular将在您更新模型时为您添加标记