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.
Asked
Active
Viewed 1.4k times
4
-
How do you inject the HTML? – Maarten Bicknese May 08 '15 at 12:17
-
@arnolrob The question is similar to http://stackoverflow.com/questions/18312523/angularjs-not-working-with-mvc-partial-views – kanchirk May 08 '15 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 May 08 '15 at 12:34
-
@kanchirk Yeap thanks, I already took a look over that post, unfortunately it wasn't helpful in my situation – arnoldrob May 08 '15 at 13:02
2 Answers
3
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.
Maarten Bicknese
- 1,498
- 1
- 14
- 27
-
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 – arnoldrob May 08 '15 at 12:56
-
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: http://stackoverflow.com/a/21860569/2637098 – Maarten Bicknese May 08 '15 at 13:01
-
I was trying something like this and selecting a specific menu assign the url to $scope.selectedUrl. This is not working. Am I getting this aproach worng? – arnoldrob May 08 '15 at 13:14
-
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. – Maarten Bicknese May 08 '15 at 13:24
-
At least am I on the rigth track? I am referring to the previous comment – arnoldrob May 08 '15 at 13:54
-
It is exaclty the way I do that. The problem is that in this case you include a html file, and I am trying to include a url which is a request to the back-end. And not sure if this is not a problem. – arnoldrob May 08 '15 at 14:16
-
your example it works now. Thanks a lot. Can you help me out with another issue. http://plnkr.co/edit/3nLaPhiw7PflMmFl6eZ6?p=info see this plunker – arnoldrob May 08 '15 at 14:29
-
I'm not near a computer in the upcoming three hours. So not much help from my side. I guess it might have to do with the scope. My suggestion is to have a look at John Papas opinionated style guide. The refactoring might take some time but it'll surely be worth it. – Maarten Bicknese May 08 '15 at 15:07
0
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
