javascript - page - Angularjs dinámicamente establecido atributo

navigationend angular 4

Question

Estoy tratando de agregar dinámicamente el atributo a div en el controlador en js angular.

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

Todo se ve bien, en el depurador veo que ese atributo fue agregado pero no ejecuta mi función. ¿Tienes alguna idea de cómo agregar atributos a la división existente y cómo hacer que funcione?

Answer 1

Angular2 proporciona [attr.<attribute name>] para enlazar valores de atributo.

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

En la clase de componentes:

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

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

Answer 2

Necesitas recompilar tu div

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

http://jsfiddle.net/r2vb1ahy/

Answer 3

Para establecer atributo dinámicamente use

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

Para obtener valor de atributo use

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

Para eliminar el uso de atributos

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

Answer 4

obtener elemento por id y establecer nuevos atributos y valores

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