从控制器中获取 ID 并添加到另一个控制器 API 调用答案

【问题标题】：Grabbing ID from a controller and adding to another controllers API call从控制器中获取 ID 并添加到另一个控制器 API 调用
【发布时间】：2016-07-25 22:50:41
【问题描述】：

这是我的初始模块：

angular.module('ngApp', [])
.factory('authInterceptor', authInterceptor)
.constant('API', 'http://myserver.com/ecar/api')
.controller('task', taskData)

function taskData($scope, $http, API) {
  $http.get( API + '/tasks' ).
  success(function(data) {
    $scope.mainTask = data;
    console.log(data);
  });
}

这将返回一个 JSON 数组，其中包含一个键“CAR ID：1297”或数组中每个项目的任何内容。我需要获取该 id 并将其以某种方式存储在一个变量中，然后在另一个控制器中调用它。原因是当这辆车显示有次要信息时，他们可以点击“查看详细信息”，它将打开另一个页面，该页面将根据 id 显示该汽车的所有详细信息。

可能是这样的：

angular.module('ngApp', [])
.factory('authInterceptor', authInterceptor)
.constant('API', 'http://myserver.com/ecar/api')
.controller('task', taskData)
.controller('carDetails', carDetails)

function taskData($scope, $http, API) {
  $http.get( API + '/tasks' ).
  success(function(data) {
    $scope.mainTask = data;
    console.log(data);
  });
}

function carDetails($scope, $http, API) {
  $http.get( API + '/car/$id' ).
  success(function(data) {
    $scope.mainTask = data;
    console.log(data);
  });
}

我只需要从 JSON 发送的“taskData”函数中获取“CAR ID”并将其添加到“carDetails”函数 API 调用中（如上所示）。所以我显然需要创建一个变量（例如$id）来传递给第二个函数，但我不知道如何。

谁能帮帮我？

【问题讨论】：

标签： javascript jquery angularjs json

【解决方案1】：

您可以使用 Angular 服务在两个控制器之间共享数据。

angular.module('ngApp', [])
.factory('authInterceptor', authInterceptor)
.constant('API', 'http://myserver.com/ecar/api')
.controller('task', taskData)
.service('carService', carService)
.controller('carDetails', carDetails)

function taskData($scope, $http, API, carService) {
  $http.get( API + '/tasks' ).
  success(function(data) {
    $scope.mainTask = data;
    console.log(data);
  });
  // Put a click listener for Car, suppose it takes in the id as the parameter
  $scope.carClickListener = function(data) {
      carService.setSelectedCarId(data);
  }
}

// Use to service to store the selected Car Id
function carService() {
   var selectedCarId = "";
   this.setSelectedCarId = function(id) {
       selectedCarId = id;
   }
   this.getSelectedCarId = function() {
       return selectedCarId;
   }
}
function carDetails($scope, $http, API) {
  $http.get( API + '/car/$id' ).
  success(function(data) {
    $scope.mainTask = data;
    console.log(data);
  });
}

【讨论】：

【解决方案2】：

您可以使用简单的value 来执行此操作。首先创建value：

angular.module('ngApp').value('carValue', { id: '' });

然后你将该值注入你的控制器：

function taskData($scope, $http, API, carValue) {
    [...]
    carValue.id = 'someValue'; <-- set this however you need to
    [...]
}

function carDetails($scope, $http, API, carValue) {
    $http.get( API + '/car/' + carValue.id )
        .success(function(data) {
            $scope.mainTask = data;
            console.log(data);
        });
}

【讨论】：

【解决方案3】：

根据这篇文章得到这个工作 - Inserting JSON ID key into ng-click directive and then pass that into another controller

这是有效的脚本：

ngular.module('ngApp', [])
.service('CarDetailService', CarDetailService)
.controller('task', taskData)
.controller('carDetails', carDetails);

CarDetailService.$inject = ['$http', 'API'];
function CarDetailService($http, API) {
  var CarDetailService = this;
  CarDetailService.setCar = function(carId) {
    CarDetailService.carId = carId;
  };

  CarDetailService.getCar = function() {
    return $http.get(API + "/car/" + CarDetailService.carId);
  };
}

taskData.$inject = ['$scope', '$http', 'API', 'CarDetailService'];
function taskData($scope, $http, API, CarDetailService) {
  $http.get( API + '/tasks' ).
  success(function(data) {
    $scope.mainTask = data;
    console.log(data);
  });

  $scope.selectCar = function(carId) {
    CarDetailService.setCar(carId);
    $location.url('/car-details-route');  //go to details page
  };
}

carDetails.$inject = ['$scope', 'CarDetailService'];
function carDetails($scope, CarDetailService) {
  CarDetailService.getCar().success(function(details) {
    $scope.details = details;
  });
}

【讨论】：