Angularjs dynamically set attribute

Question

I'm trying to dynamically add attribute to div in controller in angular js.

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

Everything looks fine, in the debugger i see that attribute was added but it doesn't execute my function. Do you have any ideas how to add attributes to the existing div and how to make it works?

• Mritunjay: I think you shouldn't call that function say just function_name.
• Florian Gl: Can't you add an condition in your click function with a boolean value, which is false by default and then set it true where you want to "add" this function?

Answer 1

You need to recompile your div

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

http://jsfiddle.net/r2vb1ahy/

• user4848830: This will work only in debug build. In production build where you have this $compileProvider.debugInfoEnabled(false), $scope will not be available like this.

Answer 2

get element by id and set new attribute and value

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

• Gonçalo Vieira: isn't this DOM manipulation? ie, what you're not supposed to be doing with Angular?
• SoEzPz: No, DOM manipulation IS what you are supposed to do when needed. The only requirement is to keep DOM manipulation outside of the controller, and keep it in custom directives.

Answer 3

To Set attribute dynamically use

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

To get attribute value use

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

To remove attribute use

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

• bokkie: totally different topic than the op's question

Answer 4

Angular2 is providing [attr.<attribute name>] to bind attribute values.

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

In component class:

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

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

• bokkie: he said: "dynamically add attribute to div in controller in angular js". Not angular2 and not in html.