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?

Seizing

I think you shouldn't call that function say just function_name. – Filibeg

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? – Folsom

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/

Carlitacarlo

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

Thank you! You're a saviour! – Mannose

Answer 2

get element by id and set new attribute and value

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

Atwood

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

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. – Elodea

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

Magill

totally different topic than the op's question – Inkerman

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

Wimbush

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