Geek Answers Handbook

AngularJS with ASP.NET Updatepanel Partial Update

I am new to AngularJS, so this may be a trivial question.

The problem I am facing is that AngularJS bindings {{Object.Field}} return to non-formatted state whenever there is a partial update of the update panel. I understand that the update panel replaces the DOM with unformatted text ({{Object.Field}}), but I cannot make angular re-evaluate the HTML fragment that was added by the update panel.

What I have tried so far:

  • I got the controller scope descriptor from the End_Request update panel and wrapped the update function on the controller inside $ scope.apply ();
  • $ Scope.compile is called in the same place, as well as inside the controller, without changing the results.
  • I tried replacing the directive, but I do not think that this is what I want.

I can get the DOM handle inside the controller and change it directly, but I understand that this is not the recommended approach, and therefore I am asking this question here.

How do I angularly reevaluate an HTML snippet replaced or introduced by a partial upgrade of the asp.net update panel?

+6
source share
3 answers

You need to compile the template again in End_Request from PageRequestManager. I used a div with id so that I can reference the element of interest in the End_Request function.

Javascript code:

var mod = angular.module("myApp", []); mod.controller("MainController", function ($scope, $compile) { $scope.data = {}; $scope.data.world = "world"; Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (sender, args) { var elem = angular.element(document.getElementById("angularTemplate")); elem.replaceWith($compile(elem)($scope)); $scope.$apply(); }); });

Aspx code:

 <body ng-app="myApp" ng-controller="MainController"> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <div id="angularTemplate"> Hello, {{data.world}} </div> <asp:Button ID="btnUpdate" runat="server" Text="Update Me" /> </ContentTemplate> </asp:UpdatePanel> </div> </form> </body>

When you click the Update Me button, the template will store Hello, world. The key should also call $ scope. $ Apply () in End_Request as this is technically done outside of angular.

+13
source

If you have dynamic content and Angular bindings, this solution may not be enough for you.

I tried to implement this solution and it almost worked. I saw the HTML content of the directive inside the .NET application, but all Angular bindings like ng-repeat and ng-click didn't work.

I found a solution here:

http://blog.travisgosselin.com/integrating-angularjs-in-a-tight-spot/

You need to manually initialize the module in the add_endRequest event:

 Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (sender, args) { angular.bootstrap($('#myDiv'), ['myNgApp']); });

This solution was enough, and I removed the solution using $ compilation.

You can read about angular.bootstrap in the documentation: https://docs.angularjs.org/guide/bootstrap

+3
source

This decision is well and reasonably well explained. But still, if someone is struggling with the asp.net and AngularJs update panel, here is one snapshot, but an unethical solution

First define a global variable on the aspx page

 var myTempScope;

Then do it in your document.ready event document

 $(document).ready(fucntion(){ myTempScope = angular.element($("#myAngularDiv")).scope() ; });

and then when you call the angular function from an aspx page like

 function callAngularFunction() { if(angular.element($("#myAngularDiv")).scope() == undefined) myTempScope.AngularFunction(); else angular.element($("#myAngularDiv")).scope().AngularFunction(); }

In my case, this worked fine.

0
source

More articles:


All Articles