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 piling the ng- directives after I inject the HTML in the DOM.
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 piling the ng- directives after I inject the HTML in the DOM.
Share Improve this question asked May 8, 2015 at 12:04 arnoldrobarnoldrob 8333 gold badges9 silver badges15 bronze badges 4- How do you inject the HTML? – Maarten Bicknese Commented May 8, 2015 at 12:17
- @arnolrob The question is similar to stackoverflow./questions/18312523/… – kanchirk Commented May 8, 2015 at 12:18
- First I was injecting using jQuery $('#id').html(data), then I changed to angular.element('#id').html(data). Also tried to pile var element = angular.element(data); $pile(element)($scope); angular.element("#id").html(element); – arnoldrob Commented May 8, 2015 at 12:34
- @kanchirk Yeap thanks, I already took a look over that post, unfortunately it wasn't helpful in my situation – arnoldrob Commented May 8, 2015 at 13:02
2 Answers
Reset to default 3Instead 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.
From an answer from here
I think you may need to pile HTML string or DOM into a template.
More information, please refer to:
$pile
https://docs.angularjs/api/ng/service/$pile
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