Question

我主要是打开一个基于模板的角度弹出窗口。但我需要从ajax调用中获取数据。

The Module sample解释了如何使用模板，但我很困惑在哪里放置ajax调用来获取项目，如下所示（该片段不起作用，但与{{}相同3}} ）：

angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl',
    function($scope, $uibModal, $log) {

      //
      // need to obtain these items from an AJAX/GET call
      //
      $scope.items = ['item1', 'item2', 'item3'];

      $scope.open = function(size) {
          var modalInstance = $uibModal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            size: size,
            resolve: {
              items: function() {
                return $scope.items;
              }
            }
          });

<div ng-controller="ModalDemoCtrl">
  <script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">...</div>
    <div class="modal-body">
      <ul>
        <li ng-repeat="item in items">...</li>
      </ul>
    </div>
    <div class="modal-footer">...</div>
  </script>

  <button type="button" ng-click="open()">Open me!</button>

</div>

我有一个返回JSON数据的链接，我会修改这个函数：

      $scope.open = function(size, jsonLink) {
          var modalInstance = $uibModal.open({

            // ?????
            templateJsonUrl: jsonLink,
            // ?????

            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            size: size,
            resolve: {
              items: function() {
                return $scope.items;
              }
            }
          });

Answer 1

只需使用http服务发出请求，并在结果解析后将结果分配给$scope.items。摘要周期将进行绑定。不要忘记注入http服务本身。

angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl',
    function($scope, $http, $uibModal, $log) {

      $http
          .post('/your_pass_to_json.json', data)
          .then(function(data) {
              $scope.items = data.items;
          });

      $scope.open = function(size) {
          var modalInstance = $uibModal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            size: size,
            resolve: {
              items: function() {
                return $scope.items;
              }
            }
          });

以下是plunker，但我已在承诺拒绝中指定$scope.items，因为无法模拟XHR请求。

<强>更新

或者你可以在xhr回调中放置模态开头：

$scope.open = function(size) {
    $http
    .post('/your_pass_to_json.json', data)
    .then(function(data) {
        var modalInstance = $uibModal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            size: size,
            resolve: {
              items: function() {
                return data.tiems;
              }
            }
       });
   });
}

在这种情况下，模态将始终以延迟打开。我建议您在初始化控制器后发出xhr请求，并对开启事件进行验证：如果xhr之前已被解雇，请从$scope获取项目，如果不是，取消之前的请求并重新申请。

Answer 2

@ Lazarev的答案是正确的，但另外在Angular中，你必须从角度服务进行ajax调用并直接注入控制器。

像这样; AngularJS Ajax Call in Service

Angular Module弹出：如何从Ajax / Json获取数据

2 个答案: