项目中以前就经常用到模态框,但是一直没有时间来整理,

好在今天稍微有点时间,就来讲一下angular-ui-bootstrap-modal这个功能要怎么来做,以及其中不得不提的几个点

首先还是最基础的类库引入,官方网站是提了一下版本的

https://angular-ui.github.io/bootstrap/这里给个网址可以自己看一下

然后在其中版本依赖就说了这么几个点

angular的版本要在1.4.x以上,1.5.5版本还在测试中,然后ui-bootstrap-tpls.js这个类库是在0.14.3以上,然后其他的组件要求都是在1.5.5一下就可以了

因为现在官方最新的angular版本好像是1.5.7,注意一下这个点就可以了,其他的问题应该都不大,

该怎么引入还是怎么引入

那么接下来直接看我的引入版本吧

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.0.0.js"></script>

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

这是我用的类库版本,当然如果你不能翻墙的话,最好还是把这些类库down下来,

直接用bower就可以了

bower install angular --save

bower install angular-bootstrap -save

bower install angular-animate -save

bower install bootstrap --save

这里提一下,ui-bootstrap-tpls.js这个类库是在angular-bootstrap这个包里面的,然后就是版本注意一下,就不会有问题了,

ok,文件引入做好了,接下来就是做一个modal

首先还是html

<div ng-controller="ModalDemoCtrl">

   <!-- 这里就是控制器的内容 ,然后直接在控制器里面插入modal的页面元素-->

    <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><buttontype="button"class="btn btn-default"ng-click="open()">Open me!</button><buttontype="button"class="btn btn-default"ng-click="open('lg')">Large modal</button><buttontype="button"class="btn btn-default"ng-click="open('sm')">Small modal</button><buttontype="button"class="btn btn-default"ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button><divng-show="selected">Selection from a modal: {{ selected }}</div></div>

然后在引入自己写的一个控制器文件app.js

<script src="app.js"></script>

重点就是接下的几点了

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);

//必须要引入的模块有两个ngAnimate\ui.bootstrap,一个都不能少,必须在这个模板加载的时候引入

angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {

//然后就是主控制器,没什么,注意$uibModal这个东西,也是要在控制器中引入的

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.animationsEnabled = true;

  $scope.open = function (size) {

    //这里很关键,是打开模态框的过程

    var modalInstance = $uibModal.open({

      animation: $scope.animationsEnabled,//打开时的动画开关

      templateUrl: 'myModalContent.html',//模态框的页面内容,这里的url是可以自己定义的,也就意味着什么都可以写

      controller: 'ModalInstanceCtrl',//这是模态框的控制器,是用来控制模态框的

      size: size,//模态框的大小尺寸

      resolve: {//这是一个入参,这个很重要,它可以把主控制器中的参数传到模态框控制器中

        items: function () {//items是一个回调函数

          return $scope.items;//这个值会被模态框的控制器获取到

        }

      }

    });

    modalInstance.result.then(function (selectedItem) {//这是一个接收模态框返回值的函数

      $scope.selected = selectedItem;//模态框的返回值

    }, function () {

      $log.info('Modal dismissed at: ' + new Date());

    });

  };

  $scope.toggleAnimation = function () {

    $scope.animationsEnabled = !$scope.animationsEnabled;//动画效果

  };

});

// Please note that $uibModalInstance represents a modal window (instance) dependency.

// It is not the same as the $uibModal service used above.

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {

//这是模态框的控制器,记住$uibModalInstance这个是用来调用函数将模态框内的数据传到外层控制器中的,items则上面所说的入参函数,它可以获取到外层主控制器的参数

  $scope.items = items;//这里就可以去外层主控制器的数据了

  $scope.selected = {

    item: $scope.items[0]

  };

  $scope.ok = function () {

    //close函数是在模态框关闭后调用的函数,他会将这个参数传到主控制器的results函数中,作为回调值

    $uibModalInstance.close($scope.selected.item);

  };

  $scope.cancel = function () {

    //dismiss也是在模态框关闭的时候进行调用,而它返回的是一个reason

    $uibModalInstance.dismiss('cancel');

  };

});

关于modal控制器中的close与dismiss这两个函数,我在网上找了一个详细的说明

意思就是说close呢是用于关闭模态框的方法,返回的是一个result--结果

dismiss也是用于关闭模态框的方法,但返回的是一个reason--理由

这么说应该很好理解了吧,

再说的详细一点就是,,,看代码

modalInstance.result.then(function (selectedItem) {

  //dosomething

});

modalInstance.reason.then(function (selecteItem) {

  //dosomething

}); 

这样总好理解了吧,哈哈,就是这样啦