من 2 صفحه با نام های Person.html و PersonNewEdit.html دارم.
درون فایل Person.html یک پنجره به صورت Modal با Bootstrap باز میشه. مشکل من اینه که در فایل دوم (PersonNewEdit.html) که از طریق Modal Window باز شده امکان استفاده از AngularJS رو ندارم!
محتویات فایل Person.html:
کد HTML:
<!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 will use this function in Modal pages
$("#myModal").modal('hide');
}
var app = angular.module('myapp', []);
app.controller('myappCtrl', function ($scope) {
$scope.MSG = "Test";
});
</script>
</body>
</html>
محتویات فایل PersonNewEdit.html:
کد HTML:
<!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 to database
CloseModalWindow(); //Declare this function in Person.html
}
var app2 = angular.module('myapp2', []);
app2.controller('myappCtrl2', function ($scope) {
$scope.MSG = "Test 2";
});
</script>
</body>
</html>
