Angular 模板和 .NET 部分回发答案

【问题标题】：Angular template and .NET Partial PostbackAngular 模板和 .NET 部分回发
【发布时间】：2014-10-27 16:58:32
【问题描述】：

我在使用 .Net 部分回发时遇到了麻烦。

问题与此基本相同：Re-initialize Angular bindings after partial postback

基本上我有一个选项卡，上面有 angular 应用程序，然后我有第二个选项卡和一些 c# 控件，我必须在选项卡之间进行部分回发，当我返回我的应用程序时，什么都没有。

我尝试使用 ngView 进行路由，然后我尝试了$route.reload()（它进入控制器，我可以看到模板正在被拉下，但页面上的结果是无）。然后我尝试了compile(templateCache.get(lazyTableControllerRoute.current.templateUrl))(scope) 提到的here。什么都没有。

请帮忙:)

每次回发后，我都会将这个 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);

还有一些配置常量，例如templateUrl。

这是我的代码：

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

更新：

我正在尝试使用 require.js..（同样，它在整个页面加载后工作。）我的想法是在部分回发后引导元素。我构建了简单的测试用例，在更新面板和我的应用程序中有一个简单的按钮，只是进行部分回发。单击后（当应用程序消失时）我在控制台中尝试：

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

然后我得到了我无法删除的错误：

App Already Bootstrapped with this Element 'document'

这里是 plunker 用于 require.js 方式的应用程序（但请记住，这仅用于代码审查目的..）

【问题讨论】：

标签： c# javascript asp.net angularjs partial-postback

【解决方案1】：

不要同时使用 ng-app 和 angular.bootstrap。
你编译过“ng-app”吗，如果没有。

ngtutorial.com/learn/bootstrap

【讨论】：

感谢您的回答。我没有同时使用它，当我尝试“require.js 方式”时，我确实删除了 ng-app 标签。
lazycontrol是如何使用的？为什么它包含 ng-app？
您可以在这里看到lazycontrol 包含ng-app，因为这是我的第一种方法- 正常角度注入。请不要将“更新”上方的代码与更新本身联系起来，因为我对 require.js 进行了一些更改 - 比如从页面中删除 ng-app 并添加 ngview ..
给你，但请记住，它不适用于 plunker :) 我不知道如何在那里模拟部分回发.. 并创建一个有效的 ashx 服务..plnkr.co/edit/SM6hYWubePLcfvgyeu0F?p=preview
上面的 plunker 是我更新后的版本，所以用 require.js 的方式。

【解决方案2】：

好吧！问题解决了。所以为了处理部分回发，您需要：

像这样定义应用程序：（请记住，您必须从 html 中删除 ng-app ！）

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

像这样实例化应用：

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

然后，当您尝试执行部分回发时，EndRequestHandler 将再次引导应用程序。重要的是删除以前的引导元素，以避免角度“已经引导”错误。

点击Here了解更多信息。

【讨论】：

【解决方案3】：

虽然其他答案可能确实有效，但我发现最好的做法是尽量不要处于 .net 控件和依赖于两者之间交互的角度控件的“混合”状态。

这个过程充其量是没有记录的......你最终会编写大量代码来适应简单的事情。

我不建议长时间执行以下操作，仅建议将其作为临时/过渡解决方案，我知道这可能无法解决所有情况....但请注意，您始终可以从 dot.net 方面解决此问题如下并重定向回你所在的页面...

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

【讨论】：