Question

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

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

到目前为止我尝试过：

从更新面板的End_Request获取控制器范围的句柄，并将更新函数包装在$ scope.apply（）的控制器内;
在同一个地方和控制器内部调用$ scope.compile，没有任何结果更改。
尝试用指令代替，但我认为这不是我想要的。

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

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

Answer 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之外运行。

Answer 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

Answer 3

这些解决方案很好并且解释得很好。但是，如果有人正在与asp.net Update面板和AngularJs进行斗争，那么这是一次性但不道德的解决方案

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

var myTempScope;

然后在document.ready event

中执行此操作

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

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

AngularJS与ASP.NET Updatepanel部分更新

3 个答案: