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标记中。我试图在下面的代码中基于此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);
});

DOM操作在AngularJS中添加元素

1 个答案: