1
我需要爲我的應用程序實現模態窗口，但是我無法做到這一點，我在網上看到了多個示例，但仍然無法在我的應用程序中正確顯示。我試圖在我的應用程序中複製這個plunker示例http://plnkr.co/edit/M35rpChHYThHLk17g9zU?p=preview 我得到$ modal.open（）問題是javascript控制檯，因爲它無法讀取屬性「無法讀取屬性'打開'未定義 在Scope.open」 下面是我的代碼相同。Angularjs Modal窗口在我的應用程序中的實現
app.js
(function() {
var app = angular.module('app', ['ui.bootstrap', 'ngFileUpload', 'bootstrap.fileField','angularUtils.directives.dirPagination','ui.router','ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/newMember', {
templateUrl: 'resources/templates/onBoard.jsp',
controller: 'onBoardCtrl'
})
.when('/toBeInitiated', {
templateUrl: 'resources/templates/toBeInitiated.jsp',
controller: 'tobeinitiatedCtrl'
})
.when('/initiated', {
templateUrl: 'resources/templates/initiated.jsp',
controller: 'initiatedCtrl'
})
.when('/pending', {
templateUrl: 'resources/templates/pendingWithFadv.jsp',
controller: 'pendingFadvCtrl'
})
.when('/inProgress', {
templateUrl: 'resources/templates/inProgress.jsp',
controller: 'inProgressCtrl'
})
.when('/completed', {
templateUrl: 'resources/templates/completed.jsp',
controller: 'completedCtrl'
})
.when('/accessList', {
templateUrl: 'resources/templates/accessList.jsp',
controller: ''
})
.when('/dataUpload', {
templateUrl: 'resources/templates/dataUpload.jsp',
controller: ''
})
.otherwise({redirectTo: '/'});
}]);
app.controller('uploadTestCtrl1',['$scope','$http',function($scope, $http){
$scope.loading = true;
$scope.doUpload = function(){
//console.log('title',$scope.title);
$scope.loading = true;
var file1 = $scope.uploadFile
//var file = $scope.myFile
console.log('uploadFile',$scope.uploadFile);
//console.log('uploadFile',$scope.myFile);
//alert('Upload Initiated');
//create form data object
var fd = new FormData();
//var file =$scope.myFile;
//console.log('file is ' + JSON.stringify(file));
fd.append('title',$scope.title);
fd.append('file', file1);
//console.dir(fd);
//send the file/data to your server
$http.post('continueFileUpload', fd, {
withCredentials : false,
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}).success(function(data){
$scope.loading = false;
//do something on success
console.log("success");
alert("Data Saved Successfully");
}).error(function(data, status, headers, config){
//do something on error
$scope.loading = false;
alert(data.message);
console.log("failed");
})
}
}]);
app.controller('uploadTestCtrl',['$scope','$http',function($scope, $http){
$scope.doUpload = function(){
//console.log('title',$scope.title);
var file1 = $scope.uploadFile
//var file = $scope.myFile
console.log('uploadFile',$scope.uploadFile);
//console.log('uploadFile',$scope.myFile);
//alert('Upload Initiated');
//create form data object
var fd = new FormData();
//var file =$scope.myFile;
//console.log('file is ' + JSON.stringify(file));
fd.append('title',$scope.title);
fd.append('file', file1);
//console.dir(fd);
//send the file/data to your server
$http.post('continueFileUpload1', fd, {
withCredentials : false,
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}).success(function(data){
//do something on success
console.log("success");
alert("Data Saved Successfully");
}).error(function(data, status, headers, config){
//do something on error
alert(data.message);
console.log("failed");
})
}
}]);
app.controller('AppController',function ($scope) {
$scope.name = "Admin";
});
app.controller('onBoardCtrl',['$scope','$http',function($scope, $http){
$scope.empList = [];
$scope.addemp = {};
$scope.createFailed=false;
$scope.saveEmp = function(){
$scope.empList.push($scope.addemp);
$http({
url: 'onBoardSubmit',
method: "POST",
data: JSON.stringify({empId: $scope.addemp.empId, empName: $scope.addemp.empName, empEmail: $scope.addemp.empEmail, empProgramName: $scope.addemp.empProgramName}),
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.createFailed=false;
alert("Data Saved Successfully");
$scope.reset();
}).error(function (data, status, headers, config) {
console.log("failed");
$scope.createFailed=true;
$scope.error=data.message;
alert(data.message);
});
};
$scope.reset = function() {
$scope.addemp = {};
$scope.onboardform.$setPristine();
}
}]);
app.controller('tobeinitiatedCtrl',['$scope','$http',function($scope, $http,$modal){
$scope.initiate=[];
$scope.names=[];
$scope.action='initiate';
//alert("tobeinitiated");
$scope.toBeInitiatedOnLoad = function(){
$scope.loading = true;
//alert($scope.id);
$http({
url: 'toBeInitiated',
method: "GET",
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.loading = false;
//$scope.initiate = angular.copy(data);
//$scope.initiate.push(data);
$scope.names=data;
//$scope.initiate = angular.copy($scope.names);
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
$scope.toggleSelection=function toggleSelection(x,conf,initiate,initiatedFor){
alert("change");
//$scope.initiate=[];
var idx = $scope.names.indexOf(initiatedFor);
alert(idx);
if (conf)
{
$scope.initiate.push(x);
//alert($scope.initiate[0].empName);
}
else
{
//var idx1 = initiate.indexOf(x.initiatedFor);
for (var i=0;i<initiate.length;i++)
{
if (angular.equals(initiate[i],x))
initiate.splice(i,1);
}
//alert("false");
}
};
$scope.open = function open() {
alert("Hi");
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl
});
};
$scope.resendIntitate = function(){
//$scope.name={};
var index = 0;
$scope.initiate.forEach(function (name) {
console.log('rows #' + (index++) + ': ' + JSON.stringify(name));
});
/*var data ={
initiatedFor : $scope.name.initiatedFor
}*/
alert(JSON.stringify($scope.initiate));
//alert(JSON.stringify($scope.initiate));
$http({
url: 'fromInitiated',
method: "POST",
data:JSON.stringify($scope.initiate),
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
//$scope.loading = false;
//$scope.initiate = angular.copy(data);
//$scope.initiate.push(data);
//$scope.names=data;
//$scope.initiate = angular.copy($scope.names);
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
}]);;
app.controller('ModalInstanceCtrl',function ($scope, $uibModalInstance, items) {
});
app.controller('initiatedCtrl',['$scope','$http',function($scope, $http){
$scope.names=[];
$scope.initiatedOnLoad = function(){
$http({
url: 'initiated',
method: "GET",
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.names=data;
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
}]);
app.controller('pendingFadvCtrl',['$scope','$http',function($scope, $http){
$scope.names=[];
$scope.pendingFadvOnLoad = function(){
$http({
url: 'pendingWithFadv',
method: "GET",
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.names=data;
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
}]);
app.controller('inProgressCtrl',['$scope','$http',function($scope, $http){
$scope.names=[];
$scope.inProgressOnLoad = function(){
$http({
url: 'inProgress',
method: "GET",
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.names=data;
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
}]);
app.controller('completedCtrl',['$scope','$http',function($scope, $http){
$scope.names=[];
$scope.completedOnLoad = function(){
$http({
url: 'completed',
method: "GET",
headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
console.log("success");
$scope.names=data;
}).error(function (data, status, headers, config) {
console.log("failed");
});
};
}]);
app.controller('TableData', function($scope, $http) {
$http.get("table_data.json")
.success(function (response) {
$scope.names = response.records;
for (var i=0; i<$scope.names.length; i++){
$scope.names[i].ReqDateParsed = new Date($scope.names[i].ReqDate);
$scope.names[i].InitDateParsed = new Date($scope.names[i].InitDate);
$scope.names[i].CompDateParsed = new Date($scope.names[i].CompDate);
$scope.names[i].DbDateParsed = new Date($scope.names[i].DbDate);
}
$scope.sortType = 'EmpName';
$scope.sortReverse = false;
});
});
app.controller('TabController', function(){
this.tab = 1;
this.setTab = function(newValue){
this.tab = newValue;
};
this.isSet = function(tabName){
return this.tab === tabName;
};
this.content = details;
});
app.directive('toBeInitiated', function(){
return{
restrict: 'E',
templateUrl: 'toBe-Initiated.html'
};
});
var details = [
{
description: "Description1",
accessCount: 2,
greenCount: 3,
orangeCount: 2
}
];
app.factory('Excel',function($window){
var uri='data:application/vnd.ms-excel;base64,',
template='<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
base64=function(s){return $window.btoa(unescape(encodeURIComponent(s)));},
format=function(s,c){return s.replace(/{(\w+)}/g,function(m,p){return c[p];})};
return {
tableToExcel:function(tableId,worksheetName){
var table=$(tableId),
ctx={worksheet:worksheetName,table:table.html()},
href=uri+base64(format(template,ctx));
return href;
}
};
})
.controller('MyCtrl',function(Excel,$timeout){
$scope.exportToExcel=function(tableId){ // ex: '#my-table'
$scope.exportHref=Excel.tableToExcel(tableId,'sheet name');
$timeout(function(){location.href=exportHref;},100); // trigger download
}
});
})();
toBeInitiated.jsp
<!-- <div img src="resources/images/spinner.jpg" ng-show='loading'> -->
<div class="col-md-1" > </div>
<div class="col-md-10">
<!-- <input type="button" id="btnExport" value=" Export Table data into Excel " onclick="exportToExcel()" /> -->
<!-- <button type="submit" class="btn btn-primary" id="btnExport" onclick="exportToExcel()">Export to Excel</button> -->
<!-- <button class="btn btn-link" id="btnExport" > --> <!-- ng-click="exportToExcel('#toBeInitiatedData')"> -->
<a href="downloadExcel"<span class="glyphicon glyphicon-share"></span> Export to Excel</a>
<!-- </button> -->
<div class="data" id="toBeInitiatedData" data-ng-controller="tobeinitiatedCtrl" data-ng-init="toBeInitiatedOnLoad()">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<div class="modal-body">
test
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<table class="table table-hover table-condensed">
<thead>
<tr>
<!-- <th>S.No.</th> -->
<!-- <th>Employee ID</th> -->
<th>
<a href="#" ng-click="sortType = 'EmpId'; sortReverse = !sortReverse" ng-model="initiatedFor">
Employee ID
<span ng-show="sortType == 'EmpId' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'EmpId' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<!-- <th>Employee Name</th> -->
<th>
<a href="#" ng-click="sortType = 'EmpName'; sortReverse = !sortReverse" ng-model="empName">
Employee Name
<span ng-show="sortType == 'EmpName' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'EmpName' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<!-- <th>Requested By</th> -->
<th>
<a href="#" ng-click="sortType = 'ReqBy'; sortReverse = !sortReverse" ng-model="initiatedBy">
Requested By
<span ng-show="sortType == 'ReqBy' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'ReqBy' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'ReqDateParsed'; sortReverse = !sortReverse" ng-model="requestedDate">
Requested Date
<span ng-show="sortType == 'ReqDateParsed' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'ReqDateParsed' && sortReverse" class="fa fa-caret-up"></span>
</a>
</th>
<th>Review Data</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="x in names | orderBy:sortType:sortReverse | filter:query | itemsPerPage:10">
<!-- <td>{{x.SNo}}</td> -->
<td>{{x.initiatedFor}}</td>
<td>{{x.empName}}</td>
<td>{{x.initiatedBy}}</td>
<td>{{x.requestedDate | date: 'dd-MMM-yyyy'}}</td>
<td><button type="button" class="btn btn-link" ng-click="open()">View {{x.initiatedFor}}</button></td>
<td>
<select name="action" class="selectContainer actionSelect form-control" ng-model= "action"title="Select 1 action" width="50px">
<option value="resend">Resend</option>
<option value="initiate">Initiate</option>
</select>
</td>
<td><input type="checkbox" ng-model="confirmed" ng-click="toggleSelection(x,confirmed,initiate,initiatedFor)" value="{{x}}" /></td>
</tr>
</tbody>
</table>
<dir-pagination-controls max-size="10" direction-links="true" boundary-links="true"></dir-pagination-controls>
<button class="btn btn-primary pull-right" ng-click="resendIntitate()">Resend/Initiate</button>
</div>
<div>
<!-- <button class="btn btn-primary pull-right" ng-click="resendIntitate()">Resend/Initiate</button> -->
</div>
</div>
<div class="col-md-1"> </div>
<!-- </div> --
回到Home.jsp
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html>
<html>
<head>
<title>Background Check App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/css/style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>
<body ng-app="app" ng-controller="TabController as tab">
<div class="container-fluid" ng-controller="TableData">
<div class="row jumbotron" ng-controller="AppController" ng-include="'resources/templates/header.jsp'"></div>
<!-- <div class="row" ng-include="'templates/navigation.html'"></div> -->
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-7 tab" ng-include="'resources/templates/navigation.jsp'"></div>
<div class="col-md-1"></div>
<div class="col-md-3">
<form class="navbar-form navbar-left" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q" ng-model="query">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
<!-- <button class="close">×</button> -->
</form>
</div>
</div>
<hr>
<div class="row" id="home" ng-show="tab.isSet(1)" ng-include="'resources/templates/homeData.jsp'"></div>
<!-- <toBe-Initiated ng-show="tab.isSet(2)"></toBe-Initiated> -->
<!-- <div class="row" ng-show="tab.isSet(2)" id="toBeInitiated" ng-include="'resources/templates/toBeInitiated.jsp'"></div> -->
<!-- <div class="row" ng-show="tab.isSet(3)" id="initiated" ng-include="'resources/templates/initiated.jsp'"></div>
<div class="row" ng-show="tab.isSet(4)" id="pending" ng-include="'resources/templates/pendingWithFadv.jsp'"></div>
<div class="row" ng-show="tab.isSet(5)" id="inProgress" ng-include="'resources/templates/inProgress.jsp'"></div>
<div class="row" ng-show="tab.isSet(6)" id="completed" ng-include="'resources/templates/completed.jsp'"></div>
<div class="row" ng-show="tab.isSet(7)" id="accessList" ng-include="'resources/templates/accessList.jsp'"></div>
<div class="row upload" ng-show="tab.isSet(8)" id="dataUpload" ng-include="'resources/templates/dataUpload.jsp'"></div>
<div class="row" ng-show="tab.isSet(9)" id="newMember" ng-include="'resources/templates/onBoard.jsp'"></div> -->
<div class="footer"></div>
</div>
<div ng-view></div>
<!--scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="resources/angular/angular.js"></script>
<!-- <script src="resources/angular/ui-bootstrap-tpls.js"></script> -->
<!-- <script src="resources/angular/ui-bootstrap.js"</script> -->
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.0.js"</script>
<script src="http://urigo.github.io/angular-spinkit/javascripts/angular-spinkit.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="https://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="resources/angular/bootstrap-table-angular.js"></script>
<script src="resources/angular/bootstrap-table-all.js"></script>
<script src="resources/scripts/app.js"></script>
<script src="resources/scripts/loginValidate.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="resources/angular/angular-bootstrap-file-field.js"></script>
<!-- <script src="js/app.js"></script> -->
<!-- <script src="silviomoreto-bootstrap-select-a8ed49e/dist/js/bootstrap-select.js"></script> -->
<!-- <script src="https://code.jquery.com/jquery.js"></script> -->
<script src="https://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
<script src="resources/angular/ng-file-upload/ng-file-upload-shim.js"></script> <!-- for no html5 browsers support -->
<script src="resources/angular/ng-file-upload/ng-file-upload.js"></script>
<script src='resources/angular/angular-upload.min.js'></script>
<script src="resources/angular/dirPagination.js"></script>
<script src="resources/angular/angular-route.js"></script>
<!--scripts -->
</body>
</html>