如何使用angularjs创建连接的模态表单?

时间:2016-08-28 07:59:52

标签: angularjs angular-ui angular-bootstrap

我想要一张显示学生名单的表格。当用户点击其中一个学生时,会弹出一个模态表单,显示学生的详细信息(这很好)。我使用如下所示的解决方案将选定的学生暴露给模态控件:

function showStudentDetails(){
        var modalInstance = $uibModal.open({
            templateUrl: 'tpl/student/app_student.view.html',
            controller: function($scope, $uibModalInstance, selectedStudent){
                $scope.selectedStudent = selectedStudent;
                $scope.userClickedCancel = function(){
                    $uibModalInstance.dismiss('cancel');
                }
                $scope.userClickedEdit = function(){
                    $uibModalInstance.close(selectedStudent);
                    modalInstance.result.then(function(selectedStudent){
                        showStudentEdit(selectedStudent);
                    })
                }
            },
            resolve: {
                selectedStudent: function() {
                    return $scope.selectedStudent;
                }
            }
        });
    }

现在,在这个模态形式中有一个编辑按钮,可以打开第二个模态。第二个模态打开很好,这是由

完成的
$scope.userClickedEdit = function(){
                $uibModalInstance.close(selectedStudent);
                modalInstance.result.then(function(selectedStudent){
                    showStudentEdit(selectedStudent);
                })
            }

在第一个代码段中。问题是selectedStudent在我的第二个模态窗体的上下文中不可用,因此编辑表单输入控件是空白的。下面是我的第二个模态形式。

function showStudentEdit(selectedStudent){
        var modalInstance = $uibModal.open({
            templateUrl: 'tpl/student/app_student.edit.html',
            controller: function($scope, $uibModalInstance, selectedStudent){
                $scope.selectedStudent = selectedStudent;
                $scope.userClickedCancel = function(){
                    $uibModalInstance.dismiss('cancel');
                }
            },
            resolve: {
                selectedStudent: function(){
                    return selectedStudent;
                }
            }
        });
    }

感谢您花时间查看此内容并感谢您的帮助。

0 个答案:

没有答案