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

【问题标题】：Angularjs code not work when content is loaded from other page using ajax使用ajax从其他页面加载内容时，Angularjs代码不起作用
【发布时间】：2019-02-05 18:15:33
【问题描述】：

我正在使用 AngularJs 和 php，当我必须从其他页面加载内容然后 AngularJs 停止工作时，我遇到了问题。

这里有一些示例代码来展示我的场景。

主页.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>

加载表单.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>

如果我将<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 放入load-form.php 并直接在浏览器中加载它，那么AngularJs 可以正常工作。但是当我在主页通过 Ajax 加载它时，我的 AngularJs 代码停止工作

【问题讨论】：

这是什么意思 - 停止工作？
@LuninRoman。我的意思是，如果我使用 ajax 加载，angularjs 代码将无法正常工作。就像在我的代码中我使用数据绑定但它在我的页面中打印原始文本 {{ textOne }} 而不是绑定数据。
你试过下面的答案了吗？
@RakeshMakluri。谢谢它的工作。只是有一些语法错误，但我编辑了。

标签： javascript php angularjs

【解决方案1】：

当您设置innerHTML 时，html 内的脚本不会被执行。您需要使用 eval() 或 executeScript() 或 appendChild() 可能是其他执行脚本。（下面使用的 setInnerHtml 解决方案取自其他答案）
动态添加 Angular 应用时需要引导它

主页.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">


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>

加载表单.php

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

【讨论】：