AngularJS与ASP.NET Updatepanel部分更新

Question

AngularJS与ASP.NET Updatepanel部分更新

edo*_*rwi 8 asp.net updatepanel angularjs

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

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

到目前为止我尝试过的:

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

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

如何使角度重新评估HTML片段,由asp.net更新面板的部分更新替换/注入？

Answer 1

Pat*_*ick 15

您需要在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();
    });
});

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	11 年，9 月前
查看次数：	4656 次
最近记录：	10 年，4 月前