javascript - AngularJS - Dynamic HTML that contains the controller code -
i have angularjs page displays popup. html popup dynamically retrieved server using ajax call. dynamic html contains new controller , necessary angularjs code controller well. code works if child page javascript code present in parent page. keep child page code in child page itself.
can please point out doing wrong?
main page
<div id="mainpage" ng-controller="maincontroller"> contains table displays bunch of rows. </div> <div id="popup"> dynamic html retrieved 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'> html here. </div> <script type="text/javascript"> angularmainapp.controller('childcontroller', ['$scope', '$http', function ($scope, $http) { }]); </script>
angular need know changed content , realize should update self .
so , have tel him apply watchers , other stuff current dom .
for doing shall use $scope.$apply(); . calling function force angular add watchers , other stuff's dom , can work you'r new contents .
i suggest read digest in angularjs , see how works . here's link problem see problem better :
angularjs docs : $scope.$apply()
angularjs: $watch, $digest , $apply
good luck , have fun .
Comments
Post a Comment