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-禁用的元素添加到我的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

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