Angularjs动态设置属性

时间:2014-09-10 07:21:26

标签: javascript angularjs attributes setattribute

我正试图在角度js中动态地将属性添加到控制器中的div。

 var table = document.getElementById("div_id").setAttribute("ng-click", "function_name()");
 $scope.$apply();

一切看起来都很好,在调试器中我看到该属性已添加,但它没有执行我的功能。您是否有任何想法如何将属性添加到现有div以及如何使其工作?

4 个答案:

答案 0 :(得分:19)

您需要重新编译div

var el = angular.element("div_id");
$scope = el.scope();
$injector = el.injector();
$injector.invoke(function($compile){
   $compile(el)($scope)
})

http://jsfiddle.net/r2vb1ahy/

答案 1 :(得分:13)

按ID获取元素并设置新属性和值

 var el =angular.element('#divId');
 el.attr('attr-name', 'attr-value');

答案 2 :(得分:0)

动态设置属性

var myEl = angular.element(document.querySelector('#divID'));
myEl.attr('myattr',"attr val");

要获取属性值

var myEl = angular.element( document.querySelector('#divID'));
alert(myEl.attr('myattr'));

删除属性使用

var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.removeAttr('myattr');

答案 3 :(得分:-1)

Angular2正在提供[attr.<attribute name>]来绑定属性值。

<div id="divID" [attr.role]="roleVal">
  This text color can be changed
</div>

在组件类中:

  addAttr() {
    this.roleVal = 'admin';
  }

  removeAttr() {
    this.roleVal = '';
  }

  checkAttr() {
    alert(this.roleVal);
  }

来自http://blog.sodhanalibrary.com/2016/02/set-attribute-and-remove-attribute-with.html