Angular Template und .NET Partial Postback

Question

Ich habe ein Problem, eckigen Arbeiten mit. Net teilweise Postbacks bekommen.

Frage ist im Grunde dieselbe dazu: Re-initialize Angular bindings after partial postback

Grundsätzlich habe ich eine Lasche auf dem ich Winkel app, dann bin ich mit einer C# Steuer zweiten Register aufweisen, I partielle Postback zwischen Registerkarten zu tun haben, und wenn ich zurück zu meiner App geht, gibt es nichts.

Ich habe versucht Routing mit ngView dann habe ich versucht $route.reload() (es geht an den Controller, und ich kann sehen, dass die Vorlage heruntergezogen wird, aber das Ergebnis auf der Seite ist keine). Dann versuchte ich compile(templateCache.get(lazyTableControllerRoute.current.templateUrl))(scope) wie erwähnt here. Nichts.

Bitte helfen :)

Nach jedem Postbacks ich auf Seite bin setzen Sie diesen HTML:

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

Und einige Config-Konstanten wie templateUrl.

Hier ist mein 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 e.g. $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:

ich mit require.js versucht wurde .. (Wieder ist es nach dem vollständigen Laden der Seite zu arbeiten.) Meine Idee Element Bootstrap war nach teilweisem Postback. Ich baute einfachen Testfall, dass im Update-Panel zusammen mit meiner App gibt es einfache Schaltfläche, nur teilweise Postback. halten

App Already Bootstrapped with this Element 'document' 

Hier ist plunker für App in require.js Art und Weise (aber bitte: Nach dem Klick (wenn App verschwunden) Ich habe versucht, in der Konsole:

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

Aber dann bekam ich Fehler, die ich nicht entfernen bedenken Sie, dass es nur für Code Überprüfung Zweck ist ..)

Answer 1

• nicht ng-app und angular.bootstrap alle zusammen auf einmal verwenden.
• hast du "ng-app" kompiliert, wenn nicht.

ngtutorial.com/learn/bootstrap

Answer 2

In Ordnung! Problem gelöst .. Also, um mit Teilpostbacks Sie arbeiten müssen:

App Definieren Sie wie folgt aus: (! Nicht vergessen, dass Sie ng-App von HTML zu entfernen haben)

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

Instantiate App wie folgt aus:

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); 
}); 

Dann, wenn Sie teilweise Postbacks EndRequestHandler zu tun versuchen, wieder app Bootstrap. Was ist wichtig, um zuvor Bootstrap-Element zu entfernen, um eckige "bereits bootstrapped" Fehler zu vermeiden.

Klicken Sie auf Here für weitere Informationen.

Answer 3

Obwohl die anderen Antworten wahrscheinlich funktionieren, habe ich festgestellt, dass es am besten ist, zu versuchen, nicht in einem "gemischten" Zustand von .net-Steuerungen und eckigen Steuerungen zu sein, die auf Interaktion zwischen den beiden angewiesen sind.

Der Prozess dafür ist bestenfalls undokumentiert ... und Sie schreiben am Ende eine Menge Code, um einfache Dinge unterzubringen.

Ich würde nicht empfehlen, das folgende lang zu tun und nur als vorübergehende/Übergangslösung vorschlagen und ich weiß, dass dies nicht jeden Fall lösen kann .... aber beachten Sie, dass Sie dieses Problem immer von dot.net angreifen können Seite wie folgt und Redirect zurück zu der Seite, die Sie sind ...

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