How to load the AngularJs page in DIV using ajax

Question

I have created a table like this.

<table>
<tr>
 <th>Name<th>
 <th>Dept<th>
 <th>Num<th>
</tr>
<tr onclick="detail('xyz','1')">
  <td>abc</td>
  <td>xyz</td>
  <td>1</td>
</tr>
</table>
<div id='content'></div>

While onclick ajax page will be called

function detail(dept,no){
$.ajax({
    url:"det.php?dept="+dept+"&no="+no,
    success:function(data){
        $.getScript("../bootstrap/js/user_det.js");
        document.getElementById('content').innerHTML=data;
    }
});

In det.php page the user_det.js will be created dynamically according to the parameter passed.

<script src='bootstrap/js/user_det.js'> </script>
<div  ng-app="myApp" ng-controller="MyController">
  <div  ng-repeat = "val in sample_det">
     <div>{{val.dept}}</div>
     <div>{{val.id}}</div>
     <div>{{val.date}}</div>
  </div>
</div>

If I run det.php page separately angularjs page running perfectly,But ajax success function the page is not loaded properly. So I need some solution to load angularjs page in ajax.

If you want to freehand build the view and load javascript first using ajax - and then want angularjs to initialize, you can probably avoid using ng-app directive and Manually initialize angularjs as mentioned here. Let us know if this is what you want or if this is an option. — amitthk
– amitthk, Commented Nov 2, 2015 at 8:01

Shohel · Accepted Answer · 2015-11-02 10:16:59Z

4

You can add a directive that will load your html and js file.

HTML:

<div id='content' load-content></div>

JS:

app.directive('loadContent', function($compile) {
  return {
    link: function(scope, elem, attrs) {

      $.ajax({
        url: "det.php?dept=" + dept + "&no=" + no,
        success: function(data) {

          //append this js into this page header
          $.getScript("../bootstrap/js/user_det.js");

          //create an angular element. (this is still our "view")
          var el = angular.element(data);

          //compile the view into a function.
          compiled = $compile(el);

          //append our view to the element of the directive.
          elem.append(el);

          //bind our view to the scope!
          //(try commenting out this line to see what happens!)
          compiled(scope);
        }
      });
    }
  };
});

Into on click method

$.ajax({
    url: "det.php?dept=" + dept + "&no=" + no,
    success: function (data) {

        //append this js into this page header
        $.getScript("../bootstrap/js/user_det.js");

        //create an angular element. (this is still our "view")
        var el = angular.element(data);

        //compile the view into a function.
        compiled = $compile(el);

        //append our view to the element of the directive.
        var elem = angular.element("#content");
        elem.append(el);

        //bind our view to the scope!
        //(try commenting out this line to see what happens!)
        compiled(scope);
    }
});

HTML <div id='content'></div>

edited Nov 2, 2015 at 10:16

answered Nov 2, 2015 at 8:28

Shohel

3,9645 gold badges41 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pravin Over a year ago

Have to use this script inside onclick.?

Shohel Over a year ago

I have used on load. because directive is automatically called when the page is called

Pravin Over a year ago

Here I'm using onclick function so I have to pass dynamic values to that det.php.Is there is some other solution?

Collectives™ on Stack Overflow

How to load the AngularJs page in DIV using ajax

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related