AngularJS 与 ASP.NET Updatepanel 部分更新答案

【问题标题】：AngularJS with ASP.NET Updatepanel partial updateAngularJS 与 ASP.NET Updatepanel 部分更新
【发布时间】：2015-07-21 12:26:51
【问题描述】：

我是 AngularJS 的新手，所以这可能是一个微不足道的问题。

我面临的问题是，只要有更新面板部分更新，AngularJS 绑定 {{Object.Field}} 就会恢复为未格式化状态。我知道更新面板正在用非格式化文本（{{Object.Field}}）替换 DOM，但我无法从角度重新评估更新面板注入的 HTML 片段。

到目前为止我已经尝试过：

从更新面板的 End_Request 获取控制器范围的句柄，并将更新函数包装在 $scope.apply() 内的控制器上；
在同一位置和控制器内部调用 $scope.compile，结果没有变化。
尝试用指令替换，但我认为这不是我想要的。

我可以获取控制器内部 DOM 的句柄并直接更改它，但我知道这不是推荐的方法，因此我在这里问这个问题。

如何让 Angular 重新评估 HTML 片段，由 asp.net 更新面板的部分更新替换/注入？

【问题讨论】：

标签： asp.net angularjs updatepanel

【解决方案1】：

您需要在 PageRequestManager 的 End_Request 中重新编译模板。我使用了一个带有 id 的 div，因此我可以在 End_Request 函数中引用感兴趣的元素。

javascript代码：

var mod = angular.module("myApp", []);

mod.controller("MainController", function ($scope, $compile) {
    $scope.data = {};
    $scope.data.world = "world";

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (sender, args) {
        var elem = angular.element(document.getElementById("angularTemplate"));

        elem.replaceWith($compile(elem)($scope));
        $scope.$apply();
    });
});

aspx代码：

<body ng-app="myApp" ng-controller="MainController">
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <div id="angularTemplate">
                    Hello, {{data.world}}
                </div>

                <asp:Button ID="btnUpdate" runat="server" Text="Update Me" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>

单击“更新我”按钮将在模板中保留“Hello, world”。关键是还要在 End_Request 中调用 $scope.$apply()，因为这在技术上是在 angular 之外运行的。

【讨论】：

【解决方案2】：

如果您有动态内容和 Angular 绑定，那么这个解决方案可能对您来说还不够。

我已尝试实施此解决方案，并且几乎成功了。我在 .NET 应用程序中看到了指令的 HTML 内容，但是所有 Angular 绑定，如 ng-repeat 和 ng-click，都不起作用。

我在这里找到了解决方案：

http://blog.travisgosselin.com/integrating-angularjs-in-a-tight-spot/

您需要在 add_endRequest 事件中手动初始化您的模块：

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (sender, args) {
                angular.bootstrap($('#myDiv'), ['myNgApp']);
            });

这个解决方案已经足够了，我用 $compile 删除了这个解决方案。

您可以在文档中阅读有关 angular.bootstrap 的信息：https://docs.angularjs.org/guide/bootstrap

【讨论】：

在我的例子中，我使用了 add_pageLoaded 而不是 add_endRequest，这样我就可以在第一个页面加载以及 UpdatePanel 的后续刷新时绑定 Angular。（请注意，这样做时，您应该从 HTML 中删除 ng-app="MyApp" 属性。）此外，Angular 引导文档中的一些示例建议在文档元素上引导，但这在大多数 UpdatePanel 场景中不起作用因为它没有被替换。相反，您应该引导子 div。

【解决方案3】：

这些解决方案很好，而且解释得很好。但是，如果有人在 asp.net 更新面板和 AngularJs 上苦苦挣扎，这是一个不道德的解决方案

首先在你的aspx页面中定义一个全局变量

var myTempScope;

然后在您的 document.ready 事件中执行此操作

$(document).ready(fucntion(){
    myTempScope = angular.element($("#myAngularDiv")).scope() ;
});

然后当您从 aspx 页面调用角度函数时，例如

function callAngularFunction() {
    if(angular.element($("#myAngularDiv")).scope() == undefined)
        myTempScope.AngularFunction();
    else
       angular.element($("#myAngularDiv")).scope().AngularFunction();
}

在我的情况下，这工作正常。

【讨论】：