AngularJS 事件与 ASP.NET UpdatePanel

Question

我正在尝试在 ASP UpdatePanel 中使用 AngularJS，非常类似于这个问题：AngularJS with ASP.NET Updatepanel partial update

该解决方案也有很大帮助，至少在静态部分方面，即初始化时显示的所有内容。

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (sender, args) {
                var elem = angular.element(document.getElementById("myDiv"));
                var newElem = $compile(elem)($scope);
                $scope.$apply();
                elem.replaceWith(newElem.html());
            });

add_endRequest() 中的属性设置已正确显示。我的问题是所有互动都死了。

例如，如果我输入

<div id="myDiv">
    {{testtext}}
    <div ng-init="testtext='hello world'"/>
</div>

它将按预期打印出字符串。但是当添加即点击事件时没有任何反应。

<div ng-click="testtext='hello world'">Click here</div>

知道为什么吗？据我了解，angular $compile 和 $scope.$apply() 应该适用于所有 angularjs 功能，但似乎不是。

Answer 1

我遇到了同样的问题。

我有一个带有 iframe 的 Angular 页面，其中包含一个旧的 asp.net 应用程序（带有用户控件和更新面板）。

我尝试将 Angular 指令添加到 .NET 部分，但遇到了同样的问题。该指令有一个空模板（指令的 div 下没有 HTML 内容）。

应用您提到的解决方案后：

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function (sender, args) {
            var elem = angular.element(document.getElementById("myDiv"));
            var newElem = $compile(elem)($scope);
            $scope.$apply();
            elem.replaceWith(newElem.html());
        });

我看到了 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 2

在朋友的帮助下弄明白了。问题是只有 AngularJS 列表 <div id="myDiv"> 的元素在 add_endRequest() 方法中被重新编译。当将其更改为 div 持有 angularjs 控制器时，围绕整个 UpdatePanel 部分...

<div ng-controller="UpdatePanelController" id="UpdatePanelController">
    <asp:UpdatePanel ID="UpdatePanel" UpdateMode="Conditional" runat="server">
        ...
    </asp:UpdatePanel>  
</div>

然后编译它的子...

    OneViewApp.controller("UpdatePanelController", function ($scope, $compile) {            
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
            var elem = angular.element(document.getElementById("UpdatePanelController"));
            $compile(elem.children())($scope);
            $scope.$apply();
        });
    });

一切正常。由于 UpdatePanel 替换了 html，因此需要重新编译整个控制器才能使其正常工作。

这当然也可以通过（重新）引导 angular 应用程序的每一步来实现，如另一个答案中所建议的，但上述解决方案更接近原始代码和因此在这种情况下更简单。

AngularJS 事件与 ASP.NET UpdatePanel

AngularJS events with ASP.NET UpdatePanel

asp.net

angularjs

updatepanel