解决不启动服务功能



我是Angular的新手,查找相关问题,但找不到任何有用的问题。我希望有人可以提供一些见识,因为我一整天都无济于事:我正在尝试使用解决方案来使用$ Resource和UI-Router进行应用来获取数据。问题在于,对服务方法的呼叫永远不会得到(呼叫是定义的,int eh Resolve属性'(,尽管状态似乎可以加载良好。(该州实际上具有UI网格,因此当前网格显示为空(。该应用程序正在使用JSON服务器目前提供数据,该服务器未显示任何HTTP请求。请在下面找到一些相关代码:国家提供商配置:

angular.module('carsApp', ['ui.router', 'ngResource', 'ui.bootstrap', 'ui.grid'])
  .config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
      // abstract state for 'car' state. Creates view template with two sub tabs.
      .state('app.main.car', {
        url: "",
        abstract: true,
        views: {
          // the child template (Absolutely named)
          'contentbar@app.main': {
            templateUrl: 'views/crid.html',
            controller: 'GridController'
          },
          'subTabs@app.main': {
            templateUrl: 'views/cars.html',
            controller: 'CarController'
          }
        },
        resolve: {
          // create an Object property called "cars"
          // which will later be used for Dependency Injection
          // inside our Controller. Inject any Services required to resolve the data
          cars: ['gridFactory', function(gridFactory) {
            // Return Service call, that returns a Promise
            return gridFactory.getCars();
          }],
          dealer: function() {
            return {};
          }
        }
      })
      .state('app.main.car.all', {
        url: "car/summary",
        views: {
          'subTabView@app.main.car': {
            templateUrl: 'views/summary.html'
          }
        },
        resolve: {
          cars: ['gridFactory', function(gridFactory) {
            // Return Service call, that returns a Promise
            return gridFactory.getCars();
          }],
          dealer: function() {
            return {};
          }
        }
      });
    $urlRouterProvider.otherwise('/');
  });

服务:

.service('gridFactory', ['$resource', 'baseURL', function($resource, baseURL) {
        this.getCars = function() {
          return $resource(baseURL + "cars", null, {
            'query': {
              method: 'GET',
              isArray: true,
              // im setting authroization header here so using this version
              // of query to be able to add headers
            }
          });
        }
      }

控制器:

.controller('GridController', ['$scope', '$stateParams', '$state', 'gridFactory', 'cars', 'dealer', function($scope, $stateParams, $state, gridFactory, cars, dealer) {
        $scope.cars = cars; //i am not sure if this is the correct way to assign. Looking up at 
        //all the blog posts i could, this is what i understood
        $scope.dealer = dealer;
        console.log('scope objects ' + JSON.stringify($scope.cars)); //$scope.cars is undefined here
        //grid related code follows. Not shown here to keep things simple.
        // the grid is apparently working as i was able to get data without using resolve.
        // some context on why i want to use resolve:
        // I want the grid to refresh whenever an entry on the grid is clicked, the corresponding details
        // for that entry are fetched from gridFActory using resource and displayed in the grid again.
        // However, the grid was not being refreshed ( i was using a child controller for a the .all state,
        // i tried every trick on stackoverflow to make it work but giving 'resolve' a go as a final attempt)
      }

我希望有人可以就我所缺少的东西提供一些见解。非常感谢您的时间!

需要调用query()方法并返回$resource承诺。默认情况下,$资源方法返回请求完成后填充的空对象或数组

resolve: {          
      cars: ['gridFactory', function(gridFactory) {
        // Return Service call, that returns a Promise
        return gridFactory.getCars().query().$promise;
      }],
      dealer: ....

您还可以将此调用的一些调用转移到服务方法中,并返回Query((。$ Promise

demo

我想在您的工厂获取汽车方法中的问题:

尝试以下内容:

 .service('gridFactory', ['$resource', 'baseURL', function($resource, baseURL) {
    this.getCars = function() {
      var cars =  $resource(baseURL + "cars", null, {
        'query': {
          method: 'GET',
          isArray: true,
          // im setting authroization header here so using this version
          // of query to be able to add headers
        }
       return new Promise(function(resolve, reject){
          var result = [];
          cars.query(function (response) {
             angular.forEach(response, function (item) {
               result.push(item);
             }
          }
          resolve(result);
        })
       })
      });
    }

  }

我认为这个问题与您有关

最新更新