Question

我能够在html文件中创建一个模态对话框，但我需要单击一个按钮，在控制器中做一些逻辑（即服务调用和验证数据），并根据响应，我需要从控制器中弹出一个模态对话框，以通知用户存在错误。

我已经知道如何在html文件中执行此操作，但它不会从控制器中弹出。以下是我所拥有的片段：

login.html - 包含带有提交按钮的表单（我没有粘贴整个文件）：

  <form name="loginPage" class="form-signin" role="form" style="position: absolute; margin: 250px 0px 0px 500px;" ng-submit="submitForm(userForm.$valid)">
<h2 class="form-signin-heading">Login</h2>
<input type="text" class="form-control" ng-model="name" placeholder="Username" required autofocus>
<input type="password" class="form-control" ng-model="password" ng-click="password" placeholder="Password" required>
<label class="checkbox">
    <input type="checkbox" value="remember-me"> Remember me
</label>
<input type="submit" class="btn btn-lg btn-primary btn-block" value="Log In"/>

controllers.js - 包含此代码（我没有粘贴整个文件）：

 $scope.submitForm = function () {
      //Making an Ajax service call (SOAP service call being made) in this function, and then results will then call a function named ajaxFinish

 $.ajax({
        url: productServiceUrl,
        type: "POST",
        dataType: "xml",
        data: soapMessage,
        processData: false,
        success: function (xml) {
            ajaxFinish($scope, xml);
        },
        contentType: "text/xml; charset=utf-8"
    });

}

  function ajaxFinish($scope, xml) {
      var modalInstance = $modal.open({
        templateUrl: 'view/myModalContent.html',
        controller: ModalInstanceCtrl,
        resolve: {
            items: function () {
                return $scope.items;
            }
        }
    });
 }

myModalContent.html -

 <label>Alert Message!</label>

当我调试时，它会命中ajaxFinish方法，但没有任何东西打开。我正在使用stateProvider。我有一个名为modules.js的文件，其中包含一堆页面，其中一个是模态对话框：

modules.js（一些代码的片段） -

         .state('main.myModalContent', {
            url: '',
            controller: ModalDemoCtrl,
            templateUrl: 'view/myModalContent.html'
        })

当我在下面的评论中尝试使用Plunker时，我的模态对话框会弹出屏幕左侧...完全切断。看截图： enter image description here

Answer 1

很高兴你把它整理好了。如果其他人遇到问题，请使用plunker作为参考。如果模式显示但屏幕不亮，请检查css。你可能已经覆盖了bootstrap css模态类。在angular-ui网站上有很好的文档，以及github页面。

AngularJS - 如何从Controller创建模态对话框

1 个答案:

参考