Question

我正在使用Angular bootsrap模式服务。 ui-bootstrap的版本是ngular-ui-bootstrap 1.3.3。下面是我的代码。

首先在模块上，我已正确注册。

var angularFormsApp = angular.module("angularFormsApp", ["ngRoute", "ui.bootstrap"]);

然后在角度控制器上，我正确地注入了这个指令。

var loginController = function ($scope, $window, $routeParams, $uibModal, DataService)

然后我通过跟随同一个控制器内的代码来调用这个模态

var onError = function (reason) {
            $scope.modalOptions.headerText = "Error";
            $scope.modalOptions.bodyText = reason.statusText;

            $uibModal.open({
                templateUrl: baseurl + 'app/ErrorMessages/PopUpErrorMessage.html',
                controller: 'loginController'
            });
        };

        $scope.cancelForm = function () {
            $uibModalInstance.dismiss('cancel');
        };

现在你可以看到我为modal创建了单独的html文件，下面是html

<div class="modal-header">
  <h3>{{modalOptions.headerText}}</h3>
</div>
<div class="modal-body">
  <p>{{modalOptions.bodyText}}</p>
</div>
<div class="modal-footer">
 <input type="button" class="btn btn-default" value="Close"
            ng-click="cancelForm()" />
</div>

现在直到这里一切正常，我的意思是错误方法，模态显示但问题是它显示空白，即使在关闭按钮点击时没有发生任何事情。

Chrome浏览器的控制台没有错误。这是屏幕截图。

Answer 1

您的Modal不了解控制器的范围。尝试改为：

    $uibModal.open({
        templateUrl: baseurl + 'app/ErrorMessages/PopUpErrorMessage.html',
        scope: $scope
    });

Answer 2

要使用当前的控制器变量，请尝试更改 controller: 'loginController'到scope: $scope。它会将当前范围传递给模态。

类似的问题在这里：AngularJS passing data to bootstrap modal

角度模态无法正常工作

2 个答案: