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 n

Answer 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.

Answer 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