Szablon kątowy i .NET Częściowa informacja zwrotna

Question

Mam problem z uzyskaniem kątowej pracy z .Net częściowymi zwrotami.

Pytanie jest w zasadzie taki sam, aby w ten sposób: Re-initialize Angular bindings after partial postback

Zasadniczo mam kartę, na której mam kątową aplikację, a następnie Mam drugą kartę z jakiejś kontroli C#, muszę zrobić częściowe odświeżenie między kartami i kiedy jestem wracając do mojej aplikacji, nie ma nic.

Próbowałem routingu z ngView, a następnie wypróbowałem $route.reload() (trafia do kontrolera i widzę, że szablon jest rozkładany, ale wynik na stronie nie ma). Następnie próbowałem compile(templateCache.get(lazyTableControllerRoute.current.templateUrl))(scope) jak wspomniano here. Nic.

Proszę o pomoc :)

po każdym odświeżenie kładę to na stronie 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); 

a niektóre stałe config jak templateUrl.

Oto mój kod:

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:

Próbowałam z require.js .. (Ponownie, to działa po pełnym załadowaniu strony). Mój pomysł polegał na bootstrap elementu po częściowym odświeżeniu. Zbudowałem prosty przypadek testowy, który w Panelu aktualizacji wraz z moją aplikacją zawiera prosty przycisk, po prostu częściowy odświeżenie. Po kliknięcie (gdy aplikacja zniknęła) Próbowałem w konsoli:

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

Ale mam błąd, którego nie można usunąć:

App Already Bootstrapped with this Element 'document' 

Oto plunker dla aplikacji w require.js sposób (ale należy zachować pamiętając, że jest to po prostu celem przeglądu kodu ..)

Answer 1

• nie używaj jednocześnie aplikacji ng-app i angular.bootstrap.
• czy skompilowałeś "ng-app", jeśli tak nie jest.

ngtutorial.com/learn/bootstrap

Answer 2

porządku! Problem rozwiązany .. Tak, aby pracować z częściowym postbacks trzeba:

Zdefiniuj aplikację tak: (! Pamiętać, że trzeba usunąć aplikację z NG-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> 

instancję app tak:

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

Wtedy kiedy będzie próbować robić częściowego ogłaszania zwrotnego EndRequestHandler ponownie bootstrap aplikacji. Co jest ważne, aby usunąć wcześniej element bootstrap, aby uniknąć błędnego "już bootstrap".

Aby uzyskać więcej informacji, kliknij Here.

Answer 3

Chociaż inne odpowiedzi prawdopodobnie działają, stwierdziłem, że najlepszym sposobem działania jest unikanie "mieszanego" stanu kontroli .net i kontroli kątowej, które zależą od interakcji między nimi.

Proces ten jest w najlepszym razie nieudokumentowany ... i kończy się pisanie wielu kodów, aby pomieścić proste rzeczy.

Nie polecam robić następujących rzeczy długo i tylko sugeruję to jako tymczasowe/przejściowe rozwiązanie i wiem, że to nie rozwiąże każdej sprawy ... ale pamiętaj, że zawsze możesz zaatakować ten problem z dot.net w następujący sposób i przekierować z powrotem na stronę, na której się znajdujesz ...

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