Angularjs динамически устанавливает атрибут

Question

Я пытаюсь динамически добавлять атрибут div в контроллер в угловых js.

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

Все выглядит хорошо, в отладчике я вижу, что этот атрибут был добавлен, но он не выполняет мою функцию. Есть ли у вас идеи, как добавлять атрибуты к существующему div и как заставить его работать?

Answer 1

Вы должны перекомпилировать ваш ДИВ

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

http://jsfiddle.net/r2vb1ahy/

Answer 2

Получить элемент по идентификатору и установить новый атрибут и значение

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

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

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

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