javascript - 如何更改 Angular 中 html 元素的属性?

标签 javascript angularjs

我有一个通过 API 调用自动生成的元素,如下所示

<a target="_blank" href="http://www.work.com/reward"><b class="orange tdu">My Work History</b></a>

现在我想修改它,就像

<a ng-click="message(messageItem.id)">

即我想删除原始属性并向其添加 Angular ng-click。

我无法使用 JQuery。

最佳答案

在你的 Controller 中尝试这样。

1:选择元素并使用

删除不需要的属性

element.removeAttribute("目标");

2:使用元素添加必需的属性

element.setAttribute('ng-click', 'loadMicrosite(messageItem.id)'); '' you can use string concatenation for messageItem.id 

3:现在 DOM 中已经有了更新的元素,但它尚未附加到范围。使用 $compile 来完成它。根据 Angular 文档 $compile

将 HTML 字符串或 DOM 编译到模板中并生成模板函数,然后可以使用该函数将作用域和模板链接在一起。

https://docs.angularjs.org/api/ng/service/ $编译

var app = angular.module('app', []);

app.controller('mainCtrl', function ($scope,$compile) {
  
var sNew = document.querySelector('a');
sNew.removeAttribute("target");
sNew.removeAttribute("href");
sNew.setAttribute('ng-click', 'loadMicrosite(messageItem.id)');


$compile(sNew)($scope);
  
 $scope.loadMicrosite = function(param)
 {
   alert("I am called");
 }
  
});
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
   <a target="_blank" href="http://sprintweb.abc.com/sos-children-s-villages-of-india-new-delhi-delhi"><b class="orange tdu">SOS Children's Villages of India</b></a>

</body>
</html>

关于javascript - 如何更改 Angular 中 html 元素的属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41244892/

相关文章:

javascript - jQuery 选择选项值

javascript - 如何使用 jquery 向 ajax 调用添加参数?

javascript - 将 JS var 传递到选择器不起作用

angularjs - 如何将动态输入数据添加到angularjs中的$http数据

javascript - 如何真正保护您的 Javascript/JQuery 源代码?

javascript - 如何将 unicode 点转换为表情符号 ||符号 ||特点

javascript - Angular 和 Bootstrap 的路由问题

javascript - angularjs 过滤器 |不过滤所有对象属性

javascript - angularjs或javascript中的倒计时分钟

javascript - AngularJS ng-controller 声明