Question

我有一个返回json的API。 json有100个对象，每个对象都有图片网址和图片说明。我用ng-repeat来表示单击图像时弹出的图像和模态附加它的描述。

我有2个模板和2个控制器用于普通和模态组件。我已经在我的HTML上有图像了，我只需要将从工厂返回的相同数据传递给ModalInstanceController，这样我就可以在图像点击时显示描述。

我是否需要调用工厂方法来获取数据 ModalInstanceController或从控制器传递数据（这是一个包含promise with promise的数组）。问题是我通过了具有解析但不能在ModalInstanceController中提取它的ietms 它是一个包含promise的数组（在控制台中它表示“值刚刚被评估”，我不能将.then（）用于数组。

我的代码结构是：

JSON工厂

(function() {
  angular
    .module('Brastlewark')
    .factory('GnomeFactory', GnomeFactory)

  function GnomeFactory($http) {
    let allGnomes = { getAllGnomes }

    function getAllGnomes() {
      const url = 'https://raw.githubusercontent.com/rrafols/mobile_test/master/data.json'
      return $http.get(url)
        .then(response => response.data.Brastlewark)
    }
    return allGnomes
  }
})()

打开模态实例的主控制器

(function() {
  angular
    .module('Brastlewark')
    .controller('DetailsController', DetailsController)

  function DetailsController(GnomeFactory, $log, $uibModal) {
    let vm = this

    GnomeFactory.getAllGnomes()
      .then((data) => {
        vm.gnomeList = data
        return vm.gnomeList
      })

    // opening modal window to trigger model instance controller to act
    vm.showModal = (index) => {
      $log.log(`Button with index ${index} was clicked !!`)
      let configModal = {
        animation: true,
        templateUrl: 'myModal.html',
        size: 'sm',
        controller: 'ModalController',
        resolve: {
          gnomeData: () => vm.gnomeList
        }
      }
      let modalInstance = $uibModal.open(configModal)
      modalInstance.result.then(console.log, console.log)
    }
  }
})()

ModalController

angular
  .module('Brastlewark')
  .controller('ModalController', ModalController)

function ModalController($scope, $uibModalInstance, $log, gnomeData) {

  $scope.gnomeList = gnomeData
  $scope.ok = function() {
    $uibModalInstance.close($scope)
  }
  $scope.cancel = () => {
    $uibModalInstance.dismiss('cancel')
  }
}

两者的模板

    <section id="details">
      <ul>
        <li ng-repeat="gnome in vm.gnomeList">
          <button type="button" ng-click="vm.showModal($index)">
            <img ng-src={{gnome.thumbnail}}>
          </button>
        </li>
      </ul>
    </section>

    <!-- @modal template start -->
    <script type="text/ng-template" id="myModal.html">
      <div class="modal-body" id="modalbody">
        <ul>
          <p>Friends : </p>
          <li ng-repeat="friend in gnomeList.friends">
            <span>{{friend}}</span>
          </li>
        </ul>
        <div class="modal-footer">
          <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
          <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </script>

注意：它显示图像的模式和索引点击...但是没有收到数组。

Answer 1

将您的服务更改为（仅返回API承诺）

(function() {
  angular
    .module('Brastlewark')
    .factory('GnomeFactory', GnomeFactory)

  function GnomeFactory($http) {
    let allGnomes = { getAllGnomes }

    function getAllGnomes() {
      const url = 'https://raw.githubusercontent.com/rrafols/mobile_test/master/data.json'
      return $http.get(url)
    }
    return allGnomes
  }
})()

仅返回API承诺return $http.get(url)

现在您的控制器使用then

处理从服务返回的承诺

(function() {
  angular
    .module('Brastlewark')
    .controller('DetailsController', DetailsController)

  function DetailsController(GnomeFactory, $log, $uibModal) {
    let vm = this

    GnomeFactory.getAllGnomes()
      .then((data) => {
        vm.gnomeList = data.data.Brastlewark
        return vm.gnomeList
      },(data) => {
       console.log('error')
      })

    // opening modal window to trigger model instance controller to act
    vm.showModal = (index) => {
      $log.log(`Button with index ${index} was clicked !!`)
      let configModal = {
        animation: true,
        templateUrl: 'myModal.html',
        size: 'sm',
        controller: 'ModalController',
        resolve: {
          gnomeData: () => vm.gnomeList
        }
      }
      let modalInstance = $uibModal.open(configModal)
      modalInstance.result.then(console.log, console.log)
    }
  }
})()

从promise对象或数组

1 个答案: