Как загрузить страницу AngularJs в DIV с помощью ajax

Question

Я создал таблицу, подобную этой.

<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> 

Хотя OnClick страница Аякса будет называться

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

В det.php странице в user_det.js будет создан динамически в соответствии с параметром, передаваемым.

<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> 

Если я запускаю det.php страницу отдельно angularjs страница работает отлично, но функция Ajax успеха страница не загружается должным образом. Поэтому мне нужно некоторое решение для загрузки страницы angularjs в ajax.

Answer 1

Вы можете добавить директиву, что будет загружать ваши html-файлы и js-файлы.

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

В основе метода щелчка

$.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>