Динамический атрибут Angularjs

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

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

http://jsfiddle.net/r2vb1ahy/

Ответ 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);
  }

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