DOM Manipulation Добавление элемента в AngularJS

Question

tldr;

Как бы добавить элемент в HTML-тег, используя AngularJS?

без элемента:

<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 и добавить нг отключенной элемент в моем 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); 
}); 

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