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

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

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

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


person user2282428    schedule 10.09.2014    source источник
comment
Я думаю, что вы не должны вызывать эту функцию, скажем, просто function_name.   -  person Mritunjay    schedule 10.09.2014
comment
Разве вы не можете добавить условие в функцию щелчка с логическим значением, которое по умолчанию равно false, а затем установить его как true там, где вы хотите добавить эту функцию?   -  person Florian Gl    schedule 10.09.2014


Ответы (4)


Вам нужно перекомпилировать ваш div

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

http://jsfiddle.net/r2vb1ahy/

person cevek    schedule 10.09.2014
comment
Это будет работать только в отладочной сборке. В производственной сборке, где у вас есть этот $compileProvider.debugInfoEnabled(false), $scope не будет доступен таким образом. - person user4848830; 19.01.2020
comment
Благодарю вас! Ты спаситель! - person Zain Mohsin; 14.05.2020

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

 var el =angular.element('#divId');
 el.attr('attr-name', 'attr-value');
person Shaishab Roy    schedule 25.06.2015
comment
разве это не манипуляция с DOM? то есть, что вы не должны делать с Angular? - person Gonçalo Vieira; 17.11.2015
comment
Нет, манипулирование DOM — это то, что вы должны делать, когда это необходимо. Единственное требование состоит в том, чтобы манипулировать DOM за пределами контроллера и хранить его в пользовательских директивах. - person SoEzPz; 02.02.2017

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

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');
person Navoneel Talukdar    schedule 19.02.2016
comment
совершенно другая тема, чем вопрос оператора - person bokkie; 21.03.2018

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

person Pavel Chuchuva    schedule 21.05.2017
comment
он сказал: динамически добавляйте атрибут в div в контроллере в angular js. Не angular2 и не в html. - person bokkie; 21.03.2018