angularJs摸态框实例加详细注解

最新推荐文章于 2021-06-30 02:31:38 发布

ivory_qin

最新推荐文章于 2021-06-30 02:31:38 发布

阅读量645

点赞数 2

分类专栏： angularJs 文章标签： angularjs ui.bootstrap modal 摸态框

本文链接：https://blog.csdn.net/ivory_qin/article/details/54410703

版权

angularJs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>
    <script src="http://cdn.bootcss.com/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>

</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <div ng-click="modalShow()">angular模态框</div>
    <p>you selected {{item}}</p>
    
    <script type="text/ng-template" id="modalContent.html">
        <div>
            <div ng-repeat="item in items" ng-click="select($index)">item: {{item}}</div>
            <p>you selected {{item}}</p>
            <button ng-click="ready()">确定</button>
            <button ng-click="cancel()">取消</button>
        </div>
    </script>
    <script>
        angular.module('myApp',['ui.bootstrap']).controller('myCtrl',function($scope,$modal,$log){
            $scope.modalShow = function(size){
                $scope.items = ["1","2","3"];
                // 定义模态框
                var modalInstance = $modal.open({
                    templateUrl : 'modalContent.html', // 摸态框视图
                    controller : 'modalInstanceCtrl',   // 名字自定义，摸态框控制器
                    size : size,                        // 摸态框大小配置，值为"lg","sm"
                    resolve : {                         // 从当前控制器传值到模态框控制器中
                        items : function(){
                            return $scope.items;
                        }
                    }
                })
                // 摸态框关闭时执行，第一个函数close()后执行，第二个函数dismiss()后执行
                modalInstance.result.then(function(item){
                    $scope.item = item;
                },function(item){
                    console.log("dismissed："+item);
                })
            }
        })
        angular.module('myApp').controller('modalInstanceCtrl',function($scope,$modalInstance,items){
            $scope.items = items;
            $scope.select = function(index){
                $scope.item = $scope.items[index];
            }
            $scope.ready = function(){
                // 关闭摸态框并传回数据
                $modalInstance.close($scope.item);
            }
            $scope.cancel = function(){
                // 关闭摸态框并传回数据
                $modalInstance.dismiss($scope.item);
            }
        })
    </script>
</body>
</html>