How to load MVC Partial View and keep Angular JS working

Question

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.

@arnolrob The question is similar to stackoverflow.com/questions/18312523/… — kanchirk
– 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 compile var element = angular.element(data); $compile(element)($scope); angular.element("#id").html(element); — arnoldrob
– 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
– arnoldrob, Commented May 8, 2015 at 13:02

Maarten Bicknese · Accepted Answer · 2015-05-08 12:45:42Z

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.

answered May 8, 2015 at 12:45

Maarten Bicknese

1,5681 gold badge14 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

arnoldrob Over a year ago

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 Over a year ago

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 Over a year ago

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 Over a year ago

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 Over a year ago

At least am I on the rigth track? I am referring to the previous comment

|

Community · Accepted Answer · 2017-05-23 11:53:55Z

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

Bind Angularjs to newly created html element dynamically

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered May 8, 2015 at 12:20

kanchirk

9122 gold badges13 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to load MVC Partial View and keep Angular JS working

2 Answers 2

8 Comments

$compile

AngularJS - Dynamically creating elements that specify directives

Bind Angularjs to newly created html element dynamically

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

$compile

AngularJS - Dynamically creating elements that specify directives

Bind Angularjs to newly created html element dynamically

Comments

Linked

Related