AngularJS события с ASP.NET UpdatePanel

Question

Я пытаюсь использовать AngularJS внутри ASP UpdatePanel, очень нравится в этом вопросе: 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> 

Любые идеи, почему? Насколько я понимаю, угловое $compile и $scope.$apply() должно применяться ко всем функциям угловой функции, но, похоже, это не так.

Answer 1

Фигурные его с небольшой помощью моих друзей. Проблема заключалась в том, что только элемент с моим списком 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, необходимо, чтобы контроллер был перекомпилирован, чтобы он работал правильно.

Это, конечно же, может быть достигнуто путем (re) бутстринга углового приложения для каждого шага, как это предлагается в другом ответе, но вышеупомянутое решение ближе к исходному коду и, таким образом, в этом случае проще.

Answer 2

У меня была та же проблема.

У меня есть Угловая страница с iframe, которая содержит старое приложение asp.net (с элементами управления пользователя и панелью обновления).

Я попытался добавить угловую директиву в .NET-часть и имел ту же проблему. Директива имела пустой шаблон (без содержимого HTML в div).

И после нанесения раствора вы упомянули:

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, но без угловых привязок, как нг-повтор или нг щелчок.

Решение было найдено здесь:

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']); 
      }); 

Это решение было достаточно, и я удалил решение, которое вам Вы упомянули с компиляцией $.

Вы можете прочитать о angular.bootstrap в документации: https://docs.angularjs.org/guide/bootstrap