AngularJS的模态框

最新推荐文章于 2021-01-26 15:13:45 发布

庸医2048

最新推荐文章于 2021-01-26 15:13:45 发布

阅读量797

点赞数

分类专栏： Angular

本文链接：https://blog.csdn.net/qq_20120669/article/details/52299551

版权

Angular 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

直接写步骤：

步骤1 引入相应的js

<script src="build/js/ui-bootstrap.min.js" charset="utf-8"></script>
<script src="build/js/ui-bootstrap-tpls.min.js" charset="utf-8"></script>

步骤2 在页面确定一下模板（也就是弹出框里面的东西）

<script type="text/ng-template" id="<span style="background-color: rgb(255, 0, 0);">myModelContent.html</span>">
                <div  class="w-msgbox w-msgbox-moduleCode" tabindex="0" id="pro-view-36" style="margin-left: 38% ;margin-top: 8%">
                    <a  href="javascript:void(0);" class="w-msgbox-close" ng-click="vm.cancel()" pro="close">×</a>
                    <div class="w-msgbox-hd" pro="header">我的夺宝号码</div>
                    <div class="w-msgbox-bd" pro="entry">
                        <div id="pro-view-40">
                            <div class="w-duobaoCodeList" pro="codeWarper">
                                <div class="w-duobaoCodeList-hd" pro="codeTitle">您本期总共参与了{{vm.persontimes}}人次</div>
                                <div pro="list" class="w-duobaoCodeList-list">
                                    <dl class="iItem f-clear" id="pro-view-41">
                                        <dt class="iItemTime">{{vm.recordTime | date: 'yyyy-MM-dd HH:mm:ss'}}</dt>
                                        <dt>
                                            <div class="codesstyle">
                                            <span ng-repeat="code in vm.codes" class="iCodeItem">{{code}}</span>
                                            </div>
                                        </dt>
                                    </dl>
                        </div>
                            </div>
                        </div>
                    </div>
                </div>
            </script>

步骤3 在controller中，注入$model

angular.module('com.budee.award').controller('RecordResultController',
    ['prize','record','$scope','Prize','Record','$stateParams','$modal',
    function (prize,record,$scope,Prize,Record,$stateParams,$modal) { 
 vm.open = function(size){  //打开模态
            var modalInstance = $modal.open({
                templateUrl : 'myModelContent.html',  //指向上面创建的视图
                controller : 'ModalInstanceCtrl as vm',// 初始化模态范围
                size : size, //大小配置
                resolve : {
                    record : function(){
                        return record.data;
                    }
                }
            })
        }
}]);

步骤4 实现ModalInstanceCtrl 控制器

'use strict';

angular.module('com.budee.award').controller('ModalInstanceCtrl',function($scope,$modalInstance,record) { //依赖于modalInstance
  var vm= this;
  vm.recordTime=record.createTime;
  vm.persontimes=record.drawCode.length;
  vm.codes=record.drawCode;
  vm.cancel = function () {
    $modalInstance.dismiss('cancel'); // 退出
  }
})

这样就实现了一个模态框了。