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
        });

@H_301_7@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">  <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']); //必须要引入的模块有两个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',$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 });

AngularJs模态框应用总结

猜你在找的Angularjs相关文章