Angular 模式无法正常工作

Question

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

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

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

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

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');
        };

现在你可以看到我已经为模式创建了单独的 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

您的模态框不知道您的控制器的作用域。尝试更改为：

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

Answer 2

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

这里有类似的问题：

Angular 模式无法正常工作

Angular Modal is not working properly

angularjs

bootstrap-modal

angular-directive