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.
4
-
How do you inject the HTML?Maarten Bicknese– Maarten Bicknese2015-05-08 12:17:41 +00:00Commented May 8, 2015 at 12:17
-
@arnolrob The question is similar to stackoverflow.com/questions/18312523/…kanchirk– kanchirk2015-05-08 12:18:15 +00:00Commented 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 compile var element = angular.element(data); $compile(element)($scope); angular.element("#id").html(element);arnoldrob– arnoldrob2015-05-08 12:34:00 +00:00Commented May 8, 2015 at 12:34
-
@kanchirk Yeap thanks, I already took a look over that post, unfortunately it wasn't helpful in my situationarnoldrob– arnoldrob2015-05-08 13:02:15 +00:00Commented May 8, 2015 at 13:02
Add a comment
|
2 Answers
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.
8 Comments
arnoldrob
Both of this method are pretty hard to implement at this point. it is an ASP.NET MVC application with configurable menu. So routing will be very hard to implement on client side and also templates. Sorry. Any other ideea? :D
Maarten Bicknese
I'm assuming you're making a GET HTTP request to the .NET backend which in its turn returns HTML to AngularJS. Instead of making the request yourself have the ngInclude directive (native in AngularJS) resolve the HTML for you. You can link the src to a variable so you can switch the included HTML. For more information see this answer as well: stackoverflow.com/a/21860569/2637098
arnoldrob
I was trying something like this <div ng-include="''{selectedUrl}"></div> and selecting a specific menu assign the url to $scope.selectedUrl. This is not working. Am I getting this aproach worng?
Maarten Bicknese
use a method to return selectedUrl (getSelectedUrl maybe?) to the directive. This will trigger an $apply when selectedUrl is changed. Which in its turn should refresh the content.
arnoldrob
At least am I on the rigth track? I am referring to the previous comment
|
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
