我是 AngularJS 的新手,所以这可能是一个微不足道的问题。
我面临的问题是,只要有更新面板部分更新,AngularJS 绑定 {{Object.Field}} 就会恢复为未格式化状态。我知道更新面板正在用非格式化文本({{Object.Field}})替换 DOM,但我无法以角度重新评估更新面板注入的 HTML 片段。
到目前为止我尝试过的:
- 从更新面板的 End_Request 获取控制器范围的句柄,并将更新函数包装在 $scope.apply() 内的控制器上;
- 在同一位置以及控制器内部调用 $scope.compile,结果没有变化。
- 尝试用指令替换,但我认为这不是我想要的。
我可以获取控制器内 DOM 的句柄并直接更改它,但我知道这不是推荐的方法,因此我在这里问这个问题。
如何让 Angular 重新评估由 asp.net 更新面板的部分更新替换/注入的 HTML 片段?
您需要在 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 之外运行的。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)