jquery - How to use AngularJS in remote Modal window -


i have 2 page, person.html , personnewedit.html

in first 1 open second bootstrap modal window.

problem: angularjs not work in second file (personnewedit.html).

person.html content:

<!doctype html> <html> <head>   <title></title>   <meta charset="utf-8" />   <link href="css/bootstrap.min.css" rel="stylesheet" />   <script src="js/angular.min.js"></script>   <script src="js/jquery.js"></script>   <script src="js/bootstrap.js"></script> </head> <body> <div ng-app="myapp" ng-controller="myappctrl">     <p>in main page msg: {{msg}}</p>      <!-- modal window wll display here -->       <div id="mymodal" class="modal fade" role="dialog">       </div>      <button type="button" class="btn btn-default" onclick="newperson()">new person</button> </div>          <script type="text/javascript">     function newperson() {         $("#mymodal").find('*').remove();                     $("#mymodal").load("personnewedit.html");         $("#mymodal").modal();     }      function closemodalwindow()     {         //we use function in modal pages         $("#mymodal").modal('hide');     }      var app = angular.module('myapp', []);     app.controller('myappctrl', function ($scope) {         $scope.msg = "test";     }); </script> </body> </html> 

and personnewedit.html content:

<!doctype html> <html> <head>    <title>modal window</title>    <meta charset="utf-8" /> </head> <body>   <div class="modal-dialog modal-lg">     <div class="modal-content">         <div class="modal-header">             <button type="button" class="close" data-dismiss="modal">&times;</button>             <div class="col-lg-9">                 <h4 class="modal-title">person new edit</h4>             </div>         </div>         <div class="modal-body">              <div id="app2" ng-app="myapp2" ng-controller="myappctrl2">                 <div>                     in modal page msg: {{msg}}                 </div>             </div>         </div>          <div class="modal-footer">             <button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>             <button id="btnsave" class="btn btn-primary" onclick="save();">save</button>         </div>     </div> </div>  <script type="text/javascript">     var personid = 0;     function save() {         //save data database         closemodalwindow();         //declare function in person.html     }      var app2 = angular.module('myapp2', []);     app2.controller('myappctrl2', function ($scope) {         $scope.msg = "test 2";     });         </script> </body> </html> 

angularjs not included in second html file. should unify html files, , make single app (instead of having 2 separate apps), , have partial views. because you're declaring closemodelwindow in first file in-line, don't have in second html. can create separate person.js include in both files , refer functions there.


Comments

Popular posts from this blog

java - Static nested class instance -

c# - Bluetooth LE CanUpdate Characteristic property -

JavaScript - Replace variable from string in all occurrences -