Angular模板和.NET Partial Postback

Question

我无法使用.Net部分回发获得角度.

问题与此基本相同:在部分回发后重新初始化角度绑定

基本上我有一个选项卡,我有一个角度应用程序,然后我有第二个选项卡与一些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 ..(再次,它在整页加载后工作.)我的想法是在部分回发后引导元素.我构建了一个简单的测试用例,在Update Panel和我的应用程序中有一个简单的按钮,只是进行部分回发.点击后(当应用程序消失时)我在控制台中尝试:

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

但后来我得到了我无法删除的错误:

App Already Bootstrapped with this Element 'document'

这里是require.js方式的app的plunker(但请记住它只是为了代码审查目的..)

Answer 1

• 不要同时使用 ng-app 和 angular.bootstrap 。
• 您是否编译了“ng-app”，如果是，则不要。

ngtutorial.com/learn/bootstrap