Angular之模态弹窗ui-bootstrap-modal及轻量级弹窗ngDialog

最新推荐文章于 2024-05-07 21:57:37 发布

weixin_34149796

最新推荐文章于 2024-05-07 21:57:37 发布

阅读量326

点赞数

文章标签： ui javascript ViewUI

原文链接：http://www.cnblogs.com/zjf-1992/p/6493652.html

版权

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>

转载于:https://www.cnblogs.com/zjf-1992/p/6493652.html

weixin_34149796

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular之模态弹窗ui-bootstrap-modal及轻量级弹窗ngDialog

ui-bootstrap 中模态官网angular-ui-bootstrap 对于ui-bootstrap集成大量指令如折叠ui.bootstrap.accordion、时间插件ui.bootstrap.datepicker、接下来要说明的模态窗ui.bootstrap.modal等.....疑问？ angular-ui-bootstrap-1.3.2 引入时遇到问题：E...
复制链接

扫一扫