AngularJS - Динамический HTML, содержащий код контроллера

Question

У меня есть страница AngularJS, которая отображает всплывающее окно. HTML для всплывающего окна динамически извлекается с сервера с помощью вызова AJAX. Этот динамический HTML содержит новый контроллер и необходимый код AngularJS для контроллера. Этот код работает только в том случае, если код дочерней страницы JavaScript присутствует на родительской странице. Я хотел бы сохранить весь код дочерней страницы на самой дочерней странице.

Может кто-нибудь указать, что я делаю неправильно?

Главная

<div id="mainPage" ng-controller="mainController"> 
      Contains a table that displays a bunch of rows. 
    </div> 

    <div id="popup"> 
      Dynamic HTML retrieved from AJAX goes here. 
    </div> 

    <script type="text/javascript"> 
      angularMainApp.controller('mainController', ['$scope', '$http', '$compile', function ($scope, $http, $compile) 
      { 
        $scope.activateView = function(ele) 
        { 
          $compile(ele.contents())($scope); 
          $scope.$apply(); 
        }; 

        $scope.buttonClick = function() 
        { 
          $("#popup").html(dynamicHTMLThroughAJAX); 
      $scope.activateView($("#divCreateTemplatePopup")); 

          return; 
        } 
        return; 
      }]); 
    </script> 

Dynamic HTML Content

<div ng-controller='childController'> 
      Some HTML here. 
    </div> 


    <script type="text/javascript"> 
      angularMainApp.controller('childController', ['$scope', '$http', function ($scope, $http) 
      { 
      }]); 
    </script> 

Answer 1

Угловая необходимо знать, что вы изменили содержание и понять, что он должен обновить его сам тоже.

так, что вам нужно сделать, это подключить наблюдателей и другие вещи к текущему DOM.

для этого вы должны использовать $scope.$apply();. вызывая эту функцию, вы вынуждаете углы добавлять наблюдателей и другие вещи в DOM, и теперь они могут работать с вашим новым содержимым.

Я предлагаю вам прочитать о дайджесте в angularjs и посмотреть, как он работает. вот какая-то связь о вашей проблеме, чтобы увидеть проблему лучше:

AngularJS and scope.$apply

Digest cycle and $scope

AngularJs docs : $scope.$apply()

When to use $scope.$apply()

AngularJS: $watch, $digest and $apply

удачи и получайте удовольствие.