How to get render data from angular ajax Call

Question

I have below 2 files , index.html files makes an ajax call using angular to ajax.html, ajax.html file contains some angular code, i need the rendered angular code of ajax.html in index.html so I could replace it in div#listelement. I am not able to get the render code

index.html(code)

<!DOCTYPE html>
<html lang="en" ng-app="myAppUpdate">
<head>
 <meta charset="UTF-8">
 <title>Angular Ajax HTML Render</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="myControllerUpdate">
<div id="listelement">
 <li>old data</li>
    <li>old data v2</li>
</div> 

<script>
var jq = $.noConflict();
var myAppUpdate = angular.module('myAppUpdate',[]);
console.log('outside');
// var myApp = angular.module('myApp',['ui.bootstrap']);      
myAppUpdate.controller('myControllerUpdate', function ($scope,$http,$compile) {
 console.log('inside');
    $http.get('ajax.html')
     .success(function (data) {
                console.log(data);
                console.log('working');

               var html = jq('#listelement').html(data);
    $compile(html)($scope);

             //    var newstuff = $formBlock.html(response);
             // $compile(newstuff)(scope);

            });
  });
</script> 
</body>
</html>

ajax.html(code)

<div data-ng-controller="myController">
 <li ng-repeat="x in data">
  {{x}}
 </li>
</div>
 

<script>
var myApp = angular.module('myAppUpdate',[])
myApp.controller('myController',function ($scope) {
 $scope.data = ['1','2','3'];
  });

</script> 
</body>
</html>

You should use routing for better preference. – Jigar7521 Oct 19 '16 at 10:32 — Jigar7521, Oct 19 '16 at 10:32

Karim · Accepted Answer · 2016-10-19T12:59:05.313

0

i've created a plnkr , it seems to work now

https://plnkr.co/edit/dcEth90yfuN3DtxIHHdI?p=preview

the issue was related to this:

var myApp = angular.module('myAppUpdate',[]) 
//this is called twice in your code, with the brackets you are 
//instanciating the module.

https://docs.angularjs.org/guide/module

Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule

edited Oct 19 '16 at 12:59

answered Oct 19 '16 at 10:35

Karim

8,454
3
25
33

Thanks for the solution but i need to pass data of ajax response to other controller, so keeping both of them in same file, does not provide proper solution. any solution to this ?? – dharmeshdev19 Oct 19 '16 at 12:22
you can use a service to share data between two controller – Karim Oct 19 '16 at 12:28
but how to pass data to service – dharmeshdev19 Oct 19 '16 at 12:40
i've changed the plnkr , i've added some comments and an example of a service that may suit your case. take a look at it – Karim Oct 19 '16 at 12:58
the data i received is a php response and not a static data defined in controller, how should i procced in such situation – dharmeshdev19 Oct 19 '16 at 13:04
i don't know if i understand exactly, but if you want to load dynamically a controller you should check ocLazyLoad library. http://stackoverflow.com/questions/15250644/loading-an-angularjs-controller-dynamically – Karim Oct 19 '16 at 13:11

How to get render data from angular ajax Call

1 Answers1