棱角分明的UI模式，发送数据从$模态控制HTTP [英] Angular-ui modal, sending data into modal controller from $http

问题描述

我使用的角度，用户界面​​模式指令 http://angular-ui.github.io/bootstrap/

I'm using the angular-ui modal directive http://angular-ui.github.io/bootstrap/ .

我按照从上面的链接的例子。

I have followed the example from the link above.

这是我的数据我想从我的控制器发送：

This is my data I want to send from my controller:

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;
      }
    }
  });
};

这是我的模态控制器：

And this is my modal controller:

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

  console.log(selectedProduct);

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

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

问题是我不能在我的模态控制器进入选择产品。我知道原因是什么做的宽度asyncrnous电话，那只能是从GUI访问。但我怎么解决这个问题？我如何发送$ scope.selectedProduct我ModalInstanceCtrl？

Problem is i can't access the "selected product" in my Modal controller. I know the reason is something to do width asyncrnous call and it can only be access from the GUI. But how do I solve this issue? How do i send the "$scope.selectedProduct" to my ModalInstanceCtrl?

推荐答案

您可以尝试像

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

基本上你的 $模式可以采取一个承诺，那么为什么不使用它。现在的目标应该可以在控制器上时的承诺得到解决。在 ModalInstanceCtrl 应

Basically your $modal can take a promise, so why not use it. Now the object should be available on the controller when the promise gets resolved. The ModalInstanceCtrl should be

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

因为你解决项目属性不是 selectedProduct 属性。

这篇关于棱角分明的UI模式，发送数据从$模态控制HTTP的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！