How should I load mvc partial views and keep Angular JS working.
Angular JS is working fine after I render the layout, but if I load partial views in the layout, Angular JS is not working anymore in the partials.
I guess that Angular engine is not compiling the ng- directives after I inject the HTML in the DOM.
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
Instead of inject your HTML manually. Be it through angular.element.html or $().html. Try using one of the following, angular approved, options:
- A routing engine like ngRoute or ui-router. The engine can include a template which is rendered by the backend.
- The ngInclude directive. This way you can include HTML templates directly.
- Write a custom directive which injects your HTML.
Because these are AngularJS friendly methods, Angular will actually parse the HTML and bind any values within the newly loaded HTML.
Method 2
From an answer from here
I think you may need to compile HTML string or DOM into a template.
More information, please refer to:
$compile
https://docs.angularjs.org/api/ng/service/$compile
There are some threads that may help you:
AngularJS – Dynamically creating elements that specify directives
AngularJS – Dynamically creating elements that specify directives
Bind Angularjs to newly created html element dynamically
Bind Angularjs to newly created html element dynamically
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0