[英]DOM Manipulation Adding an Element in AngularJS
tldr; tldr;
How would I add an element to an HTML tag using AngularJS? 如何使用AngularJS将元素添加到HTML标签?
without element: 没有元素:
<a class=“btn btn-primary” href=“blah.com” adding-element>Foo Bar</a>
with element: 与元素:
<a ng-disabled="!isChecked" class=“btn btn-primary” href=“blah.com” adding-element>Foo Bar</a>
I am trying to perform DOM manipulation and add the ng-disabled element to my HTML tag on initial page load. 我正在尝试执行DOM操作,并将ng-disabled元素添加到初始页面加载时的HTML标签中。 I have attempted to do it in the code below based on this example but I am wondering if there is a better/easier way?
我已尝试根据此示例在下面的代码中进行此操作,但我想知道是否有更好/更简便的方法? I would also like it to be removed after page load is completed.
我也希望在页面加载完成后将其删除。
If someone could please explain it or provide a good tutorial/reference on how to accomplish this (preferably with plain vanilla Javascript), I would welcome it. 如果有人可以解释它或提供有关如何完成此操作的良好教程/参考(最好使用普通的Java脚本),我将非常欢迎。 Thanks.
谢谢。
HTML (before DOM Manipulation) HTML(在DOM操作之前)
<a class=“btn btn-primary” href=“blah.com” adding-element>Foo Bar</a>
HTML (after DOM Manipulation) 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);
});
For jQuery style DOM manipulation use angular.element 对于jQuery风格的DOM操作,请使用angular.element
to add the attribute you can use element.attr('ng-disabled', '!isChecked')
and if you need to remove it element.removeAttr('ng-disabled')
要添加属性,可以使用
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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.