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?

I think you shouldn't call that function say just function_name. — Mritunjay
– Mritunjay, Commented Sep 10, 2014 at 7:24
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? — Florian Gl
– Florian Gl, Commented Sep 10, 2014 at 7:24

cevek · Accepted Answer · 2014-09-10 11:04:21Z

21

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/

edited Sep 10, 2014 at 11:04

answered Sep 10, 2014 at 7:32

cevek

8721 gold badge8 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user4848830 Over a year ago

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

Shaishab Roy · Accepted Answer · 2015-06-25 07:55:39Z

17

get element by id and set new attribute and value

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

answered Jun 25, 2015 at 7:55

Shaishab Roy

16.9k7 gold badges56 silver badges69 bronze badges

2 Comments

Gonçalo Vieira Over a year ago

isn't this DOM manipulation? ie, what you're not supposed to be doing with Angular?

SoEzPz Over a year ago

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.

Navoneel Talukdar · Accepted Answer · 2016-02-19 18:23:18Z

0

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

answered Feb 19, 2016 at 18:23

Navoneel Talukdar

4,6365 gold badges23 silver badges43 bronze badges

1 Comment

bokkie Over a year ago

totally different topic than the op's question

Pavel Chuchuva · Accepted Answer · 2017-05-21 20:53:50Z

-1

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

answered May 21, 2017 at 20:53

Pavel Chuchuva

22.6k11 gold badges103 silver badges119 bronze badges

1 Comment

bokkie Over a year ago

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

Collectives™ on Stack Overflow

Angularjs dynamically set attribute

4 Answers 4

1 Comment

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related