如何使用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>