Question

我是棱角分明的新人，查找相关问题，但找不到任何有用的东西。我希望有人可以提供一些见解，因为我花了一整天的时间无济于事：我正在尝试使用resolve来使用$ resource和ui-router为我的applciation获取数据。问题是对服务方法的调用永远不会被调用（调用被定义为解析属性＆＃39;）虽然状态似乎加载正常。（该州实际上有一个ui-grid，所以目前网格显示为空）。应用程序正在使用json-server提供数据，服务器不显示任何http请求。请在下面找到一些相关代码：州提供者配置：

＆＃13;

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('/');
  });

＆＃13;

服务：

＆＃13;

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

＆＃13;

控制器：

＆＃13;

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

＆＃13;

我希望有人可以提供一些关于我所缺少的信息。非常感谢你的时间！

Answer 1

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

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

你也可以将这个调用中的一部分移动到service方法中并让它返回查询（）。$ promise

的 DEMO

Answer 2

我认为你工厂的问题是获得汽车方法：

请尝试以下操作：

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

        })

       })

      });
    }


  }

我认为此question与您的相关

解决不解雇服务功能

2 个答案: