Angular and .NET Partial Postback

Question

I'm having trouble getting angular to work with partial .Net postbacks.

The question is basically the same: Re-initialize angular bindings after partial postback

Basically, I have a tab on which I have an angular application, then I have a second tab with some C # control, I need to do partial feedback between the tabs, and when I return to my application, there is nothing.

I tried routing with ngView, then I tried $route.reload() (it goes to the controller and I see that the template is reset, but the result is not on the page). Then I tried compile(templateCache.get(lazyTableControllerRoute.current.templateUrl))(scope) as mentioned here . Nothing.

Please, help:)

After each postback, I put this html on the page:

 LiteralControl lazyControl = new LiteralControl("<div ng-app=\"LazyLoadingApp\" style=\"padding:10px\" ng-controller=\"LazyTableController\" ng-view><lazy-table> </lazy-table></div>"); Controls.Add(lazyControl); 

And some configuration constants like templateUrl .

Here is my code:

 var app = angular.module('LazyLoadingApp', ['ui.bootstrap', 'ngRoute'], function ($interpolateProvider) { $interpolateProvider.startSymbol('[['); $interpolateProvider.endSymbol(']]'); }); app.config(function ($routeProvider, $locationProvider, tableTemplateUrl) { $routeProvider.when('/Page.Web.UI/sptl_project.aspx', { controller: 'LazyTableController', templateUrl: tableTemplateUrl, }); // configure html5 to get links working on jsfiddle $locationProvider.html5Mode(true); }); //**This objects I am using after partial postback to check in the console if eg $route.reload() works..** var lazyTableControllerRoute = null; var templateCache = null; var compile = null; var scope = null; app.directive('lazyTable', ['tableTemplateUrl', function (tableTemplateUrl) { return { name: 'lazyTable', priority: 0, restrict: 'E', // E = Element, A = Attribute, C = Class, M = Comment templateUrl: tableTemplateUrl }; } ]).controller('LazyTableController', ['$scope', '$rootScope', 'lazyFactory', 'opsPerRequest', 'header', '$route', '$templateCache', '$compile', function ($scope, $rootScope, lazyFactory, opsPerRequest, header, $route, $templateCache, $compile) { lazyTableControllerRoute = $route; var loadingPromise = null; templateCache = $templateCache; compile = $compile; scope = $scope; (...) rest is not important 

UPDATE:

I tried with require.js .. (Again, it works after the page has fully loaded.) My idea was to reload the element after a partial postback. I built a simple test case that in the update panel, along with my application, there is a simple button, just doing a partial postback. After clicking (when the application disappeared) I tried in the console:

 angular.bootstrap(document, ['LazyLoadingApp']) 

But then I got an error that I cannot remove:

 App Already Bootstrapped with this Element 'document' 

Here is a plunker for a require.js-style application (but please keep in mind that this is just for checking the code).

Answer 1

• don't use ng-app and angular.bootstrap all together.
• You compiled "ng-app" if not.

ngtutorial.com/learn/bootstrap

Answer 2

Good! The problem is resolved. Therefore, to work with partial postbacks, you need to:

Define the application as follows: (remember that you need to remove ng-app from html!)

 <base href="/"> <asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Button ID="fire" runat="server" Text="fire!" /> <div id="parent" > <div id="boodstapped" ng-view ></div></div> </ContentTemplate> </asp:UpdatePanel> 

Create an application like this:

 var app = angular.module('LazyLoadingApp', ['ui.bootstrap', 'ngRoute']); jQuery(document).ready(function ($) { var prm = Sys.WebForms.PageRequestManager.getInstance(); function EndRequestHandler(sender, args) { jQuery('#parent').children().remove(); jQuery('#parent').append('<div id="boodstapped" ng-view ></div>'); angular.bootstrap(jQuery('#boodstapped'), ['LazyLoadingApp']); } prm.add_endRequest(EndRequestHandler); }); 

Then, when you try to do a partial postback, EndRequestHandler will download the application again. What is important is to remove the previously bootable element in order to avoid the angular "already loaded" error.

Click here for more information.

Answer 3

Although the other answers probably work, I found that the best way to do this is to try not to be in the “mixed” state of .net controls and angular controls that depend on the interaction between them.

The process for this is undocumented at best ... and you end up writing a lot of code to post simple things.

I would not recommend doing the following for a long time and only offer a temporary / transitional solution, and I know that this may not solve every case .... but note that you can always attack this problem from dot.net with the following image and redirect back to the page where you are ...

  protected void cbChecked_My_DotNet_CallBack(object sender, EventArgs e) { DoDotNetStuff(); if(NeedToSignalToAngular){ response.redirect(yourpage.aspx?yourparams=xxx) } }