如何从angular ui bootstrap模型中的http请求获取数据

Question

我正在尝试从 angular ui bootstrap modal 中的 http 请求中获取数据，这里是我的模态代码

$scope.open = function (size, id) {
  $scope.hallName=[];  
  var modalInstance = $modal.open({
  templateUrl: 'video_gallery.html',
  controller: HomeCtrl1,
  size: size,
  resolve:{
            hallId:function(){
              $http({
                  url:"../home/get_hall_name/"+id,
                  method: "POST"
                  }).success(function (data) {
                  $scope.hallName=data.hall_name;
                  alert($scope.hallName);
                  }).error(function(){
                  console.log("Something went wrong  get_RegisteredHalls");
                  });
              var hall=$scope.hallName;
              return hall;
            }
          }
});
};

var HomeCtrl1 = function ($scope, $modalInstance, hallName) {
  $scope.hallName = hallName;
  $scope.selected = {};
  $scope.ok = function () {};
  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};

这是我想要得到的 hall_name

<script type="text/ng-template" id="video_gallery.html">
<div class="modal-header">
    <h4 class="modal-title" style="text-align:center;">Videos of  {{hallName}} Hall</h4>
</div>
</script>

我 hall_name 处于警戒状态，但无法看到它。请帮我挽救我的一天。提前致谢。

Answer 1

有一些困惑。

首先，解析和模型 $scope 之间

来自 documentation、

scope - a scope instance to be used for the modal's content (actually the $modal service is going to create a child scope of a provided scope). Defaults to $rootScope

resolve - members that will be resolved and passed to the controller as locals; it is equivalent of the resolve property for AngularJS routes

然后，您有 2 个选项 "pass data" 到您的模态：

使用 resolve。如果我理解正确，请使用以下代码：

$scope.open = function (size, id) {
  var modalInstance = $modal.open({
    resolve:{
      hallId: function() {
        return "Walter white";
      }
    }
  });
}

var HomeCtrl1 = function ($scope, $modalInstance, hallId) {
  //hallId == "Walter white"
}

在您的控制器中注入一个 hallId 变量。因此，在 resolve 中，您提供填充 hallId 的代码，然后将其放入控制器中，注入为 hallId.

使用 scope。例如

$scope.open = function (size, id) {
  var modalScope = parent.$new();
  modalScope.whatever = "Jessee Pinkman";

  var modalInstance = $modal.open({
    scope: modalScope
  });
};

var HomeCtrl1 = function ($scope, $modalInstance) {
  //$scope.whatever == "Jessee Pinkman"
}

那么，在同步和异步之间

在 resolve 中，您正在进行异步 $http 调用，但是 return 同步预期的结果。因此，这段代码

var hall=$scope.hallName;
return hall;

在此之前执行

.success(function (data) {
  $scope.hallName=data.hall_name;
  alert($scope.hallName);
})

I am getting hall_name in alert but cant able to get that in view

现在你明白为什么了。

Answer 2

为了等待 http promise 解析，您需要从您的函数中return它：

hallId:function(){
          return $http({
              url:"../home/get_hall_name/"+id,
              method: "POST"
              }).success(function (data) {

              }).error(function(){
              console.log("Something went wrong  get_RegisteredHalls");
              });
        }

然后在你的控制器中你得到这个已解决的承诺：

var HomeCtrl1 = function ($scope, $modalInstance, hallId) {
  $scope.hallName = hallId.data.hallName;
  $scope.selected = {};
  $scope.ok = function () {};
  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};

确保在解析函数和控制器中使用相同的名称（在本例中为 hallId）

如何从angular ui bootstrap模型中的http请求获取数据

How to get data from http request in angular ui bootstrap model

twitter-bootstrap

angularjs

angular-ui

angularjs-scope

首先，解析和模型 $scope 之间

那么，在同步和异步之间