ui-bootstrap 中模態
官網 angular-ui-bootstrap 對於ui-bootstrap集成大量指令如折疊ui.bootstrap.accordion、時間插件ui.bootstrap.datepicker、接下來要說明的模態窗ui.bootstrap.modal等.....
疑問？ angular-ui-bootstrap-1.3.2 引入時遇到問題：
Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $uibModal
解決 angular-1.5.5 問題得以解決
官網案列——模態效果
ui-bootstrap-modal在線編輯代碼 請猛點擊這里
ui-bootstrap-modal實現Demo[折疊]如下
<!DOCTYPE html>
<html ng-app="ui.bootstrap.demo">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ui.bootstrap 模態窗</title>
<link rel="stylesheet" href="framework/bootstrap-3.0.0/css/bootstrap.min.css" />
<script type="text/javascript" src="framework/angular-1.5.5/angular.js"></script>
<script src="framework/angular-ui-bootstrap-1.3.2/ui-bootstrap-tpls.min.js"></script>
</head>
<body ng-controller="ModalDemoCtrl">
<div style="padding: 20px;">
<button type="button" class="btn btn-primary" ng-click="open()">Open me!</button>
<button type="button" class="btn btn-success" ng-click="open('lg')">Large modal</button>
<button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
<script type="text/javascript">
var myModal = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
myModal.controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl', /*依賴控制器注入*/
backdrop: "static",
size: size,
resolve: { /*傳遞到模態窗口中的對象*/
items1: function () {
return $scope.items;
}
}
});
//模態實例---ModalDemoCtrl中的$scope
//接收點擊ok參數
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
//$uibModalInstance是模態窗口的實例
myModal.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items1) {
$scope.items = items1;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
//$scope.selected.item 值傳到
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
</script>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
</body>
</html>
ngDialog 輕量級彈窗
官網 ng-dialog
<!DOCTYPE html>
<html lang="en" ng-app="indexApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入第三方樣式庫bootstrap.min.css-->
<link rel="stylesheet" href="framework/bootstrap-3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="framework/ngDialog-0.6.4/css/ngDialog.css">
<link rel="stylesheet" href="framework/ngDialog-0.6.4/css/ngDialog-theme-default.css">
<link rel="stylesheet" href="css/main.css" />
<!--引入js庫anglarjs-->
<script type="text/javascript" src="framework/1.3.0.14/angular.js"></script>
<script type="text/javascript" src="framework/ngDialog-0.6.4/js/ngDialog.js"></script>
</head>
<body ng-controller="indexCtrl">
<button class="btn btn-primary" ng-click="clickToOpen()">彈窗</button>
<script>
var myModal = angular.module('indexApp',['ngDialog']);
myModal.controller('indexCtrl',function($scope,ngDialog, $http){
$http.get('cardInfo/cardInfo.json').success(function(data) {
$scope.cardInfo = data;
});
$scope.clickToOpen = function () {
ngDialog.open({
template: 'templateId.html',
className:'ngdialog-theme-default ngdialog-theme-plain',
scope: $scope,
width: '60%',
controller:function($scope){
$scope.show = function(){
$scope.closeThisDialog(); //關閉彈窗
}
}
});
};
})
</script>
<script type="text/ng-template" id="templateId.html">
<div class="ui-dialog-title ">卡片詳情信息</div>
<div class="ui-dialog-content">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>場所名稱</th>
<th>門名稱</th>
<th>員工姓名</th>
<th>員工電話</th>
<th>卡號</th>
<th>開卡日期</th>
<th>部門名稱</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="cardInfos in cardInfo">
<td>{{cardInfos.place}}</td>
<td>{{cardInfos.doorName}}</td>
<td>{{cardInfos.name}}</td>
<td>{{cardInfos.phoneNumber}}</td>
<td>{{cardInfos.cardNumber}}</td>
<td>{{cardInfos.carDate | date: 'yyyy-MM-dd' }}</td>
<td>{{cardInfos.department}}</td>
</tr>
</tbody>
</table>
<button type="submit" class="btn btn-primary" ng-click="show()">保存</button>
<button type="button" class="btn btn-default" ng-click="closeThisDialog()">取消 </button>
</div>
</script>
</body>
</html>