AngularJS : 从新模板访问延迟承诺

Question

我是 angular 的新手并且喜欢它...来自 10 年 PHP 的背景对我来说有很多新术语。这是我想做的事情，不确定是否可能，如果可以，不确定如何。我创建了一个属性列表，那部分工作正常。该列表显示每个属性的有限详细信息，所有详细信息都可用于详细查看。

所以我的问题是如何通过 ID 访问该数据而无需再次访问数据库并在新模板中显示以获取详细视图？

这是我目前的代码：

propApp.controller('propertyCrtl', function ($scope, $routeParams, $timeout, getProperty ) {

  var promise = getProperty.getList();
  promise.then(function(data){
    $scope.list = data.data.listings;
    $scope.id = $routeParams.prop_id;
    $scope.currentPage = 1; //current page
    $scope.entryLimit = 20; //max no of items to display in a page
    $scope.filteredItems = $scope.list.length; //Initially for no filter
    $scope.totalItems = $scope.list.length;
    //console.log(data.data.listings);
  })

和服务

propApp.service('getProperty', function($http, $q){

var deferred = $q.defer();
$http.get('wp-content/themes/wp-angular-theme/ajax/getProperty.php')
.then(function(data){
  deferred.resolve(data);
});

this.getList = function(){
  return deferred.promise;
}

this.getById = function(id){
  return deferred.promise;
} 

})

如有任何帮助，我们将不胜感激...感谢您的关注。

Answer 1

您似乎没有对数据进行任何修改或验证，因此无需创建新的承诺。 $http.get returns 承诺本身，您可以利用 $http 对象承诺本身。

服务

propApp.service('getProperty', function($http, $q) {

    this.getList = function() {
        return $http.get('wp-content/themes/wp-angular-theme/ajax/getProperty.php');
    }

    this.getById = function(id) {
        return $http.get('wp-content/themes/wp-angular-theme/ajax/getProperty.php?id=' + id);
    }

})

Answer 2

您可以像这样修改getByid方法。

this.getById = function(id){
   var def = $q.defer();
   deferred.promise.then(function(data){
      //find the matching list
      for (var i = 0;i <data.data.listings.length;i++) {
         if (data.data.listings[i].id == id) {
            def.resolve(data.data.listings[i]);    
            return;
         }
      }
      //Reject the promise here because we didn't find the matching id
      def.reject();
   });   
   return def;
}

编辑：

由于 list 在 $scope 对象中可用，您可以从 $scope.list 本身获取列表详细信息。

控制器

propApp.controller('propertyCrtl', function ($scope, $routeParams, $timeout, getProperty ) {

  getProperty.getList()
  .then(function(data){
    $scope.list = data.data.listings;
    $scope.id = $routeParams.prop_id;
    $scope.currentPage = 1; //current page
    $scope.entryLimit = 20; //max no of items to display in a page
    $scope.filteredItems = $scope.list.length; //Initially for no filter
    $scope.totalItems = $scope.list.length;
    //console.log(data.data.listings);
  });

  $scope.getListDetails = function (id) {
    for (var i = 0;i <$scope.list.length;i++) {
             if ($scope.list[i].id == id) {
                return $scope.list[i];
             }
          }
    return null;
  }
});

服务

propApp.service('getProperty', function($http, $q){

  this.getList = function(){
    return $http.get('wp-content/themes/wp-angular-theme/ajax/getProperty.php')
  }

});

AngularJS : 从新模板访问延迟承诺

AngularJS : access deferred promise from new template

angularjs

angularjs-service

angular-promise

angularjs-factory