使用ASP.NET的UpdatePanel局部更新AngularJS [英] AngularJS with ASP.NET Updatepanel partial update
问题描述
我是新来AngularJS，所以这可能是一个简单的问题。
I'm new to AngularJS, so this might be a trivial question.
我面临的问题是，AngularJS绑定{{Object.Field}}恢复到未格式化的状态，每当有一个更新面板部分更新。据我所知，更新面板与非格式化文本（{{Object.Field}}）替换DOM，但我无法使角度重新评估HTML的一部分，是由更新面板注入。
The problem I'm facing is that the AngularJS bindings {{Object.Field}} reverting to un formatted state whenever there is an update-panel partial update. I understand that the update-panel is replacing the DOM with the non formatted text({{Object.Field}}), but I'm not able to make angular re-evaluate the piece of HTML that was injected by the update panel.
我试过到目前为止：
- 得到的句柄从更新面板的END_REQUEST控制器的范围和包裹$ scope.apply（）内的控制器的更新功能;
- 叫$ scope.compile在同一个地方，并在控制器内部，没有结果的变化。
- 试图用一个指令替换，但我不认为这是我想要的。
我可以得到一个处理控制器内部的DOM，并直接改变它，但我明白，这不是一个推荐的方法，所以我在这里问这个问题。
I can get a handle to the DOM inside the controller and change it directly, but I understand that this is not a recommended approach and hence I'm here asking this question.
如何使角度重新评估HTML的一部分，换成/由一个asp.net更新面板的部分更新注入？
How do I make angular re-evaluate the piece of HTML, replaced/injected by an asp.net update panel's partial update?
推荐答案
您需要PageRequestManager的END_REQUEST内再次编译模板。我用一个id的div，所以我可以参考的END_REQUEST函数中感兴趣的元素。
You need to compile the template again within the End_Request of PageRequestManager. I used a div with an id so I could reference the element of interest within the End_Request function.
JavaScript的code：
The javascript code:
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 code：
The aspx code:
<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>
点击我的更新按钮，将保持你好，世界在模板中。关键是要也调用$范围。$申请（）在END_REQUEST因为这是技术上运行的角度外
Clicking the "Update Me" button will keep "Hello, world" in the template. The key is to also call $scope.$apply() in the End_Request as this is technically run outside of angular.
这篇关于使用ASP.NET的UpdatePanel局部更新AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
