angularjs1.x版本模态框与父窗口互相传参

来源：互联网发布：淘宝类目转化率查询编辑：程序博客网时间：2024/05/18 19:21

直接上代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>modalTest</title>    <link href="bootstrap.min.css" rel="stylesheet" type="text/css" />    <script type="text/javascript" src="angular.min.js"></script>    <script type="text/javascript" src="ui-bootstrap-tpls-1.3.3.min.js"></script></head><body ng-app="myApp" ng-controller="myCtrl"><button ng-click="click()"><span>open son modal</span></button></body><script>    var app = angular.module("myApp", ["ui.bootstrap"]);    app.controller("myCtrl", ["$scope", "$uibModal", function($scope, $uibModal) {        $scope.fatherId = "father";        $scope.click = function(){            var modalInstance = $uibModal.open({                template:"<div style='width: 600px; height: 200px; border-radius: 4px'><button type='button' ng-click='close()'><span>&times;</span></button><span ng-bind='fatherId'></span><span ng-bind='sonId'></span></div>",                controller: ["$scope", "$uibModalInstance", "info", function ($scope, $uibModalInstance, info) {                    $scope.init = function () {                        $scope.info = info;                        console.log("fatherId is " + $scope.info.fatherId);                        $scope.sonId = "son";                    };                    $scope.init();                    $scope.close = function () {                        $uibModalInstance.close({"sonId": $scope.sonId});                    };                }],                backdrop: "static",                resolve:{                    info : function(){                        return {"fatherId": $scope.fatherId};                    }                }            });            modalInstance.result.then(function (result) {                console.log("sonId is " + result.sonId);            }, function (reason) {                console.log(reason);            });        };    }]);</script></html>

bootstrap.min.css下载地址：bootstrap-3.3.7.zip
angular.min.js下载地址：angular.min.js
ui-bootstrap-tpls-1.3.3.min.js下载地址：ui-bootstrap-1.3.3.min.js

阅读全文

0 0