5

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

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

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

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

请帮忙 ：）

每次回发后，我都会在页面上放置这个 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'

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

4

3 回答 3

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

ngtutorial.com/learn/bootstrap

于 2014-09-04T11:13:43.917 回答
0

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

像这样定义应用程序：（请记住，您必须从 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 将再次引导应用程序。重要的是删除以前的引导元素，以避免角度“已经引导”错误。

点击这里了解更多信息。

于 2014-09-10T13:41:00.427 回答
0

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

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

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

      protected void cbChecked_My_DotNet_CallBack(object sender, EventArgs e)
        {
             DoDotNetStuff();
             if(NeedToSignalToAngular){
                   response.redirect(yourpage.aspx?yourparams=xxx)     
             }
         }
于 2017-09-06T20:41:23.060 回答