Javascript 当使用ajax从其他页面加载内容时，Angularjs代码不起作用

我正在使用AngularJs和php，当我不得不从其他页面加载内容，然后AngularJs停止工作时，我面临着一个问题

下面是一些示例代码来显示我的场景

main-page.php

<div id="form-section">
    <button id="load_form">Load Form</button>    
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript">
$(document).on("click", "#load_form", function() {
   $.ajax({
       methond: 'GET',
       url: 'load-form.php',
       success: function(resp) {
          $("#form-section").html(resp);
       }
   });
});
</script>

<div id="form-section">
    <button id="load_form">Load Form</button>    
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript">


var setInnerHtml = function(elm, html) {
  elm.innerHTML = html;
  var scripts = elm.getElementsByTagName("script");
  // If we don't clone the results then "scripts"
  // will actually update live as we insert the new
  // tags, and we'll get caught in an endless loop
  var scriptsClone = [];
  for (var i = 0; i < scripts.length; i++) {
    scriptsClone.push(scripts[i]);
  }
  for (var i = 0; i < scriptsClone.length; i++) {
    var currentScript = scriptsClone[i];
    var s = document.createElement("script");
    // Copy all the attributes from the original script
    for (var j = 0; j < currentScript.attributes.length; j++) {
      var a = currentScript.attributes[j];
      s.setAttribute(a.name, a.value);
    }
    s.appendChild(document.createTextNode(currentScript.innerHTML));
    currentScript.parentNode.replaceChild(s, currentScript);
  }
}

$(document).on("click", "#load_form", function() {
   $.ajax({
       methond: 'GET',
       url: 'load-form.php',
       success: function(resp) {
          setInnerHtml($("#form-section")[0], resp);
       }
   });
});
</script>

荷载形式
$（文档）。在（“单击”，“加载表单”，函数（）上）{
$.ajax({
方法：“获取”，
url:'load form.php'，
成功：功能（resp）{
$（“#表格部分”）.html（resp）；
}
});
});

load-form.php

<form ng-app="myApp" ng-controller="myCtrl">
{{ textOne }}
<input type="text" ng-model="textOne">
</form>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.textOne = "John"; 
});
</script>

<form ng-app="myApp" ng-controller="myCtrl" id="myApp">
{{ textOne }}
<input type="text" ng-model="textOne">
</form>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.textOne = "John"; 
});
setTimeout(function() {
     angular.bootstrap(document.getElementById('myApp'), ['myApp'], 100);
// Closing }); was missing here    
});    
</script>

{{textOne}}
var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.textOne=“John”；
});

如果我把

放在

load form.php

中，然后直接在浏览器中加载它，那么AngularJs在那里工作得很好。但当我在主页中通过Ajax加载它时，我的AngularJs代码就停止工作了

• 设置innerHTML时，不会执行html中的脚本。您需要使用eval（）或executeScript（）或appendChild（）来执行脚本。（下面使用的setInnerHtml解决方案取自其他答案）
• 动态添加angular应用程序时，需要引导它

main-page.php

<div id="form-section">
    <button id="load_form">Load Form</button>    
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript">
$(document).on("click", "#load_form", function() {
   $.ajax({
       methond: 'GET',
       url: 'load-form.php',
       success: function(resp) {
          $("#form-section").html(resp);
       }
   });
});
</script>

<div id="form-section">
    <button id="load_form">Load Form</button>    
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript">


var setInnerHtml = function(elm, html) {
  elm.innerHTML = html;
  var scripts = elm.getElementsByTagName("script");
  // If we don't clone the results then "scripts"
  // will actually update live as we insert the new
  // tags, and we'll get caught in an endless loop
  var scriptsClone = [];
  for (var i = 0; i < scripts.length; i++) {
    scriptsClone.push(scripts[i]);
  }
  for (var i = 0; i < scriptsClone.length; i++) {
    var currentScript = scriptsClone[i];
    var s = document.createElement("script");
    // Copy all the attributes from the original script
    for (var j = 0; j < currentScript.attributes.length; j++) {
      var a = currentScript.attributes[j];
      s.setAttribute(a.name, a.value);
    }
    s.appendChild(document.createTextNode(currentScript.innerHTML));
    currentScript.parentNode.replaceChild(s, currentScript);
  }
}

$(document).on("click", "#load_form", function() {
   $.ajax({
       methond: 'GET',
       url: 'load-form.php',
       success: function(resp) {
          setInnerHtml($("#form-section")[0], resp);
       }
   });
});
</script>

荷载形式
var setInnerHtml=函数（elm，html）{
elm.innerHTML=html；
var scripts=elm.getElementsByTagName（“脚本”）；
//如果我们不克隆结果，那么“脚本”
//当我们插入新的
//标签，我们会陷入一个无休止的循环
var scriptsClone=[]；
对于（var i=0；i

load-form.php

<form ng-app="myApp" ng-controller="myCtrl">
{{ textOne }}
<input type="text" ng-model="textOne">
</form>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.textOne = "John"; 
});
</script>

<form ng-app="myApp" ng-controller="myCtrl" id="myApp">
{{ textOne }}
<input type="text" ng-model="textOne">
</form>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.textOne = "John"; 
});
setTimeout(function() {
     angular.bootstrap(document.getElementById('myApp'), ['myApp'], 100);
// Closing }); was missing here    
});    
</script>

{{textOne}}
var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.textOne=“John”；
});
setTimeout（函数（）{
引导（document.getElementById（'myApp'），['myApp']，100）；
//关闭}）；他在这里失踪了
});    

什么意思-停止工作？@lunironman。我的意思是，如果我使用ajax加载，angularjs代码将无法工作。。就像在我的代码中一样，我使用了数据绑定，但它在我的页面中打印原始文本

{{textOne}}

，而不是绑定的数据。你尝试过下面的答案吗？@RakeshMakluri。谢谢，成功了。只是有一些语法错误，但我编辑了它。