角度模态无法正常工作

时间:2016-06-03 05:05:38

标签: angularjs bootstrap-modal angular-directive

我正在使用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浏览器的控制台没有错误。这是屏幕截图。

enter image description here

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:0)

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

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