Angularjs动态设置属性答案

【问题标题】：Angularjs dynamically set attributeAngularjs动态设置属性
【发布时间】：2014-09-10 07:21:25
【问题描述】：

我正在尝试在 Angular js 中将属性动态添加到控制器中的 div。

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

一切看起来都很好，在调试器中我看到该属性已添加但它不执行我的功能。您对如何向现有 div 添加属性以及如何使其工作有任何想法吗？

【问题讨论】：

【解决方案1】：

你需要重新编译你的div

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

【讨论】：

这仅适用于调试版本。在您拥有此 $compileProvider.debugInfoEnabled(false) 的生产构建中，$scope 将无法像这样使用。
谢谢！你是救世主！

【解决方案2】：

通过 id 获取元素并设置新的属性和值

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

【讨论】：

【解决方案3】：

动态设置属性使用

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

【讨论】：

【解决方案4】：

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

【讨论】：