Angular-ui模態，從$ http發送數據到模態控制器

Question

我正在使用angular-ui模態指令http://angular-ui.github.io/bootstrap/ 。

我已經按照上面的鏈接示例。

這是我想從控制器發送的數據：

ProductsFactory.getOneProduct().then(function(d){
  $scope.selectedProduct = d.data;
});

$scope.open = function () {
  var modalInstance = $modal.open({
    controller: 'ModalInstanceCtrl',
    templateUrl: 'productDetail.html',
    resolve: {
      items: function () {
        return $scope.selectedProduct;
      }
    }
  });
};

這是我的模態控制器：

var ModalInstanceCtrl = function ($scope, $modalInstance, selectedProduct) {

  console.log(selectedProduct);

  $scope.ok = function () {
    $modalInstance.close();
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};

問題是我無法訪問我的模態控制器中的“選定產品”。 我知道原因是做寬度異步調用，它只能從GUI訪問。 但是我該如何解決這個問題呢？ 如何將“$ scope.selectedProduct”發送到我的ModalInstanceCtrl？

Answer 1

你可以嘗試類似的東西

$scope.open = function () {
  var modalInstance = $modal.open({
    controller: 'ModalInstanceCtrl',
    templateUrl: 'productDetail.html',
    resolve: {
      items: function () {
        return ProductsFactory.getOneProduct();
      }
    }
  });
};

基本上你的$modal可以承諾，所以為什么不使用它。 現在，當promise得到解決時，對象應該可以在控制器上使用。 ModalInstanceCtrl應該是

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {

因為您要解析items屬性而不是selectedProduct屬性。