angularJS使用rootscope创建父域和子模态框通用的属性与函数
1. 在声明创建controller指明引用$rootscope
1 | reviewInterfaceDo.controller( 'reviewInterfaceDo' , function($scope, $rootScope, $http, $uibModal, $uibModalInstance, toastr,parameterRecord,user) |
2. 在controller中声明创建rootscope型变量commonScope ,并配置此scope内的函数和属性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | //define root scope for modal use var commonScope = $rootScope.$ new (); commonScope.rootSaveScore = function (userScoreList) { if (userScoreList != null && userScoreList.length > 0 ) { var fd = new FormData(); var userScoreRecords = angular.toJson(userScoreList); fd.append( 'userScoreRecords' , userScoreRecords); $http.post( '/reviewProcess/save' , fd, { transformRequest: angular.identity, headers: { 'Content-Type' : undefined } }) .success(function (data){ toastr.success( "submit " +data+ " score record success" ); }) .error(function (data) { toastr.error( "submit failed" ); }); } }; |
3. 在打开模态框的方法中传入commonScope
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $scope.openModal= function() { $scope.getReviewedScore(); $uibModal.open({ templateUrl: 'save.html' , controller: 'saveController' , scope: commonScope, resolve: { parentModalInstance: function() { return $uibModalInstance; }, userScoreList : function () { return $scope.userScoreList; } } }); } |
4. 在子模态框的controller中接收scope
1 | saveController.controller( 'saveController' , function($scope, $http, $uibModalInstance, parentModalInstance, toastr,userScoreList) |
5. 最后就可以在子模态框的controller中调用commonScope 中的方法和属性啦
1 2 3 4 5 6 7 | $scope.save= function() { //save reviewed score $scope.rootSaveScore($scope.userScoreList); //close modal $uibModalInstance.dismiss( 'cancel' ); parentModalInstance.close(); }; |
* 在使用resolve传值时:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | $scope.deleteVehicle = function(flag, instance){ debugger; var modalInstance = $uibModal.open({ templateUrl: 'common-delete.html' , controller: 'VehicleDeleteCtrl' , animation: true , resolve: { instance: instance, // 对象可以直接穿 flag: function() { // 其他比如字符串需要使用函数传 return flag; } }, size: 'lg' }); // 按下标删除 modalInstance.result.then(function() { $scope.vehicles.splice($scope.vehicles.indexOf(instance), 1); |
分类:
Angularjs
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· 语音处理 开源项目 EchoSharp
· 《HelloGitHub》第 106 期
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 使用 Dify + LLM 构建精确任务处理应用