如何使用ajax加載DIV中的AngularJs頁面

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> 

雖然AJAX的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頁面。

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>