1

I am working with AngularJs and php and i am facing problem when i have to load content from some other page then AngularJs stops working.

Here is some sample code to display my scenario.

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>

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>

if i put <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> in load-form.php and load it directly in browser then AngularJs works there fine. But when i load it through Ajax in main page then my AngularJs code stops working

4
  • what does it mean - stops working? Commented Feb 6, 2019 at 6:05
  • @LuninRoman. I mean angularjs code is not working if i load using ajax.. like in my code i used data binding but it is printing raw text {{ textOne }} in my page instead of binded data. Commented Feb 6, 2019 at 6:36
  • Did you try below answer? Commented Feb 6, 2019 at 7:30
  • @RakeshMakluri. Thanks it worked. Just there ware some syntax error but i edited that. Commented Feb 6, 2019 at 8:40

1 Answer 1

1
  • When you set innerHTML, script inside the html won't be executed. You need to use eval() or executeScript() or appendChild() may be other to execute the script. (below used setInnerHtml solution is taken from other answer)
  • You need to bootstrap the angular app when you add it dynamically

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


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>

load-form.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>
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.