DOM 操作在 AngularJS 中添加元素答案

【问题标题】：DOM Manipulation Adding an Element in AngularJSDOM 操作在 AngularJS 中添加元素
【发布时间】：2016-08-09 10:43:32
【问题描述】：

tldr;

如何使用 AngularJS 将元素添加到 HTML 标记？

没有元素：

<a class=“btn btn-primary” href=“blah.com” adding-element>Foo Bar</a>

与元素：

<a ng-disabled="!isChecked" class=“btn btn-primary” href=“blah.com” adding-element>Foo Bar</a>

我正在尝试执行 DOM 操作并在初始页面加载时将 ng-disabled 元素添加到我的 HTML 标记中。我试图根据example 在下面的代码中做到这一点，但我想知道是否有更好/更简单的方法？我还希望在页面加载完成后将其删除。

如果有人可以解释它或提供一个很好的教程/参考来说明如何完成这个（最好使用普通的 Javascript），我会欢迎它。谢谢。

HTML（DOM 操作之前）

<a class=“btn btn-primary” href=“blah.com” adding-element>Foo Bar</a>

HTML（DOM 操作后）

<a ng-disabled="!isChecked" class=“btn btn-primary” href=“blah.com” adding-element>Foo Bar</a>

指令

.directive('AddingElement', function() {
restrict: 'A',
//scope: {
//        ng-disabled: "="
//    },
link: function (scope, el, attrs) {
el = angular.element(‘<a ng-disabled=“!isChecked” class=“btn btn-primary” href=“blah.com” adding-element>’)
element.replaceWith(el);
$compile(el)($scope);
});

【问题讨论】：

我正在考虑使用：tutorialspoint.com/jquery/jquery-dom.htm，它建议使用 selector.replaceWith(content)。在我测试之后，我会相应地更新我的问题。

标签： javascript html angularjs dom

【解决方案1】：

对于 jQuery 样式的 DOM 操作，请使用 angular.element

添加属性可以使用element.attr('ng-disabled', '!isChecked')，如果需要删除element.removeAttr('ng-disabled')

.directive('AddingElement', function() {
restrict: 'A',
 //scope: {
 //        ng-disabled: "="
 //    },
link: function (scope, element, attrs) {
  element.attr('ng-disabled', '!isChecked')
  $compile(el)($scope);
});

【讨论】：