DOM操作在AngularJS中添加元素

Question

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标签中。 我已尝试根据此示例在下面的代码中进行此操作，但我想知道是否有更好/更简便的方法？ 我也希望在页面加载完成后将其删除。

如果有人可以解释它或提供有关如何完成此操作的良好教程/参考（最好使用普通的Java脚本），我将非常欢迎。 谢谢。

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);
});

Answer 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);
});