zoukankan      html  css  js  c++  java
  • Angular-ui/bootstarp modal 主控制器与模态框控制器传值

    调用模态框:

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

    举个栗子

    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');
        };
    });
  • 相关阅读:
    设计模式学习总结系列应用实例
    【研究课题】高校特殊学生的发现及培养机制研究
    Linux下Oracle11G RAC报错:在安装oracle软件时报file not found一例
    python pro practice
    openstack python sdk list tenants get token get servers
    openstack api
    python
    git for windows
    openstack api users list get token get servers
    linux 流量监控
  • 原文地址:https://www.cnblogs.com/SPHmomo/p/7531056.html
Copyright © 2011-2022 走看看