AngularJs模态框应用总结

 var modalInstance = $modal.open({

            templateUrl: '/static/js/controllers/dashboard/search.html',controller: 'searchCtrl',size: 'lg',resolve: {
                formSize: function () {
                    return {
                        width: '480px',height: 'auto'
                    }
                },mydisplayed: function () {
                    return $scope.mydisplayed; //返回值给模态框

                }
            },scope: scope
        });

modalInstance.result.then(function (res) {
    $scope.mydisplayed = res;
});    //获取模态框的返回值
在模态框的控制器中定义模态框关闭时，返回给主页面的值：



$modalInstance.close($scope.result); //$scope.result 模态框控制器返回的值。
下面是具体的详情，摘自网络（https://my.oschina.net/codingBingo/blog/715869）：

html页面：

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

重点就是接下的几点了

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

意思就是说close呢是用于关闭模态框的方法,返回的是一个result--结果
dismiss也是用于关闭模态框的方法,但返回的是一个reason--理由
这么说应该很好理解了吧,
再说的详细一点就是,看代码


   
<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> <button type="button" class="btn btn-default" ng-click="open()">Open me!</button> <button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button> <button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button> <button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button> <div ng-show="selected">Selection from a modal: {{ selected }}</div> </div><script src="app.js"></script>angular.module('ui.bootstrap.demo',['ngAnimate','ui.bootstrap']);
//必须要引入的模块有两个ngAnimateui.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',$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');
  };
});modalInstance.result.then(function (selectedItem) {
  //dosomething
});
modalInstance.reason.then(function (selecteItem) {
  //dosomething
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!