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">×</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
Post a Comment