Angular Controller executes on each ajax partial reresh

Question

I am adding some functionality to an existing Microsoft MVC 3 application. I cannot change the existing structure of the app itself while I do need to add some new functionality to the page. I have angular running in a div (hidden on load via jquery dialog). The MVC app has several tabs on the page. Each time a tab is chosen, the a partial cshtml (razor) loads. Along with that partial, my angular template is included. The partial references a js file that contains the angular controller. When it is first loaded and the user opens the tab and open the jquery dialog containing angular, everything works fine. I started to notice some funny behavior after the changes are saved. I noticed the same irregular behavior if I closed the dialog containing the angular template, switched to another tab, then switched back to the tab containing the angular template. Here's what is happening:

The partial being loaded by MVC reloads the angular template which initiates the angularjs controller method in the referenced js file
A new $scope is being generated each time this occurs.
Each time a controller method is invoked (via ng-click event tied to a button on the template) teh method will execute n number of times with n being the number of times the partial has been loaded since the last full page refresh.

I proved this method by logging the $scope object to the window in the start of the controller method

window['scope_' + new Date().getTime().toString()] = $scope;

After each partial page load, a new $scope object is logged to the window. Pressing a button on the template invoked a certain method tied to the ng-click event. This event fires multiple times. But calling the method manually in the console using the oldest recorded scope object in the window

scope_1378413848781.$apply(scope_1378413848781.getSomeData())

it works as intended. So, my question is, how do I prevent the controller from adding a new scope every time the MVC framework reloads the partial?

Here are some of the things I've tried that didn't work:

Adding a global flag and exiting the controller method if it was set
moving the controller reference to the _layout.cshtml file
destroying the scope when the dialog containing the template is closed

One final note, I am not using the angular route provider which I know can cause the controller to execute twice when used in conjunction with .

JK Dennis · Accepted Answer · 2013-09-09 19:03:12Z

2

It appears that Angularjs was not meant to be used in this fashion. Per the angular docs:

You can use Angular to develop both single-page and round-trip apps, but Angular is designed primarily for developing single-page apps...You normally wouldn't want to load Angular with every page change, as would be the case with using Angular in a round-trip app.

To resolve the issue, I moved the angular template as well as the reference to the controller and angular.min.js to the shared _Layout.cshtml file. This partial file loads first and is only reloaded when the entire page is refreshed. Adding angular references and loading controllers in js files referenced in asp.net mvc 3 partials will cause scope replication that can be difficult to detect.

answered Sep 9, 2013 at 19:03

JK Dennis

6718 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

Angular Controller executes on each ajax partial reresh

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related