Dynamically add angularjs directive to DOM elements using jquery

Question

I have a page where html elements will be generated dynamically from server. I want to add ng-model directive to a textbox based on some codition using jquery. for example:

$(document).ready(function(){
if(current page is 'something') //dont bother about the condition!
  $('input[title="test"]').attr('ng-model','name');
});

so that i can use ng-bind to bind the value of this text-box in the page. How do i achieve this.?

I think you have to recompile the view : https://docs.angularjs.org/guide/compiler — Jeremy Thille, Mar 06 '15 at 11:26
Don't use jQuery, use a directive. Either way you need to use `$compile` but it's best to use a directive. — Mosho, Mar 06 '15 at 11:28

score 4 · Accepted Answer · edited May 23 '17 at 12:28

This is a bad idea. Your code is running in document.ready, which angular knows nothing about, and you then add elements to the DOM and don't tell angular about them, as such, it's not going to work.

You need to think about things differently - angular has a router specifically for showing different views (or elements) on different pages, so you shouldn't be using things like:

if(current page is 'something')

Furthermore, if you read just a small amount on angular, you'll be constantly reminded that directives manipulate the DOM, and that you should avoid doing it elsewhere in almost all other cases.

I strongly recommend that before you go any further, you read more about angular to get a firm understanding of how it works, particularly in relation to jQuery (you really, really don't need jQuery if you have angular).

Light reading: This stackoverflow question
In-depth learning: Follow this course

It sucks, but you're going to have to learn more before you go any further, because otherwise you'll just end up getting frustrated and creating an app that is just 'wrong'...

Dynamically add angularjs directive to DOM elements using jquery

1 Answers1