Angular-ui 模态，从 $http 将数据发送到模态控制器

JS

在使用Angular开发Web应用程序时，我们经常需要使用模态框来显示一些重要的信息或者与用户进行交互。Angular提供了一个名为Angular-ui的插件，它包含了一些强大的UI组件，其中就包括模态框组件。本文将介绍如何使用Angular-ui模态框，并通过$http服务将数据发送到模态框控制器中。

首先，我们需要在项目中引入Angular-ui模态框的相关文件。通过在HTML文件中添加如下代码，我们就可以加载所需的脚本文件：

html
<script src="https://cdnJS.cloudflare.com/Ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.JS"></script>
<script src="https://cdnJS.cloudflare.com/Ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.JS"></script>

接下来，我们需要在Angular应用程序的模块中注入ui.bootstrap模块，以便能够使用其中的模态框组件。假设我们的应用程序模块名为myApp，我们可以这样配置：

Javascript
angular.module('myApp', ['ui.bootstrap']);

现在，我们可以在控制器中使用$uIBModal服务来打开模态框。我们可以通过$uIBModal.open方法来创建一个模态框实例，并通过templateUrl选项指定模态框的HTML模板。假设我们有一个控制器名为ModalController，我们可以这样写：

Javascript
angular.module('myApp').controller('ModalController', function($uIBModal, $http) {
  var vm = this;
  vm.openModal = function() {
    $uIBModal.open({
      templateUrl: 'modal.html',
      controller: 'ModalInstanceController',
      controllerAs: 'modalCtrl',
      resolve: {
        data: function() {
          // 通过$http服务获取数据
          return $http.get('/api/data').then(function(response) {
            return response.data;
          });
        }
      }
    });
  };
});

在上述代码中，我们使用了resolve选项来传递数据给模态框的控制器。在resolve中，我们通过$http.get方法向服务器发送一个HTTP GET请求，获取数据并返回给模态框控制器。

接下来，我们需要创建模态框的HTML模板文件modal.html。在这个模板中，我们可以使用data变量来访问从服务器获取的数据。以下是一个简单的模态框模板示例：

html
<div class="modal-header">
  <h3 class="modal-title">模态框标题</h3>
</div>
<div class="modal-body">
  
从服务器获取的数据：
  <strong>{{modalCtrl.data}}</strong>
</div>
<div class="modal-footer">
  <button class="btn btn-primary" ng-click="modalCtrl.close()">关闭</button>
</div>

在模态框的控制器ModalInstanceController中，我们可以通过$uIBModalInstance服务来关闭模态框。以下是一个简单的控制器示例：

Javascript
angular.module('myApp').controller('ModalInstanceController', function($uIBModalInstance, data) {
  var vm = this;
  
  vm.data = data;
  
  vm.close = function() {
    $uIBModalInstance.close();
  };
});

现在，我们已经完成了使用Angular-ui模态框，并通过$http服务将数据发送到模态框控制器的整个过程。通过上述代码，我们可以轻松地在Angular应用程序中实现一个功能强大的模态框组件，用于展示数据并与用户进行交互。

示例代码：

html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <Meta charset="UTF-8">
  <title>Angular-ui模态框示例</title>
  <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/CSS/bootstrap.min.CSS">
</head>
<body>
  <div ng-controller="ModalController as modalCtrl">
    <button class="btn btn-primary" ng-click="modalCtrl.openModal()">打开模态框</button>
  </div>
  <script src="https://Ajax.Googleapis.com/Ajax/libs/AngularJS/1.6.9/angular.min.JS"></script>
  <script src="https://cdnJS.cloudflare.com/Ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.JS"></script>
  <script src="https://cdnJS.cloudflare.com/Ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.JS"></script>
  <script>
    angular.module('myApp', ['ui.bootstrap']);
    angular.module('myApp').controller('ModalController', function($uIBModal, $http) {
      var vm = this;
      vm.openModal = function() {
        $uIBModal.open({
          templateUrl: 'modal.html',
          controller: 'ModalInstanceController',
          controllerAs: 'modalCtrl',
          resolve: {
            data: function() {
              return $http.get('/api/data').then(function(response) {
                return response.data;
              });
            }
          }
        });
      };
    });
    angular.module('myApp').controller('ModalInstanceController', function($uIBModalInstance, data) {
      var vm = this;
      vm.data = data;
      vm.close = function() {
        $uIBModalInstance.close();
      };
    });
  </script>
</body>
</html>

本文介绍了如何使用Angular-ui模态框，并通过$http服务将数据发送到模态框控制器中。通过上述代码示例，我们可以在Angular应用程序中轻松地实现一个功能强大的模态框组件，用于展示数据和与用户进行交互。希望这篇文章对你有所帮助！