模态内的角度自举模态

时间:2017-08-28 08:23:59

标签: angularjs angular-bootstrap

如何在模态中打开模态?我已经跟着这个plnkr,但是当我点击第二个模态的确认按钮时出现错误。这是错误:

  

错误:[$ injector:unpr]

这是我的第一个模态

 @JsonIgnore
 @ManyToOne(optional = false)
 @JoinColumn(name = "user_account_id")
 @NotNull
 private UserAccount userAccount;

这是我的第二个模态

$scope.edit = function(data) {
        var modalInstance = $uibModal.open({
            templateUrl: "/wp-content/themes/copywriter-theme/angular-modal-template/management_modal.html",
            controller: 'managementModal',
            resolve: {
                items: function() {
                    return data;
                }
            }
        });
}

所以第一个模态在另一个控制器中,而第二个模态在控制器angular.module(['ui.bootstrap']).controller('managementModal',['$scope','$http','$uibModalInstance','$uibModal','items',function($scope, $http, $uibModalInstance, $uibModal, items){ $scope.names = items; $scope.editable = items; $scope.cancel = function(){ $uibModalInstance.dismiss('cancel'); location.reload(); }; $scope.confirm = function(){ console.log("clicked"); $uibModalInstance.close($scope.editable); } $scope.update = function(){ var template_modal = "<div class='modal-body'>" + "<button type='button' class='close' ng-click='confirm()'>update</button>" + "<button type='button' class='close' ng-click='cancel()'>cancel</button>" + "</div>"; var modalInstance = $uibModal.open({ template: template_modal, controller: 'managementModal' }); }; }]); 内。但是在plnkr中可以点击按钮和它的工作我不知道为什么我的第二个模态上的按钮不起作用

1 个答案:

答案 0 :(得分:0)

我得到了答案是我需要再次声明items所以在我的第二个模态中这应该是代码

$scope.update = function(){
        var template_modal = "<div class='modal-body'>" +
                                "<button type='button' class='close' ng-click='confirm()'>update</button>" +
                                "<button type='button' class='close' ng-click='cancel()'>cancel</button>" +
                            "</div>";
        var modalInstance = $uibModal.open({
            template: template_modal,
            controller: 'managementModal',
            //added code
            resolve: {
                items: function() {
                    return items;
                }
            }
        });
    };