在AngularJS应用程序中,如何将一个函数的结果用于另一个函数?

时间:2015-08-12 04:17:47

标签: javascript angularjs

我仍然是AngularJS的新手,而且我坚持认为我已经过度复杂了。在我的一个控制器中,我有两个调用我的数据工厂的函数,但我需要第二个函数来使用第一个函数的结果。

当我使用下面的代码片段时,我会继续获取未定义的顺序。我不想把第二个功能放在第一个功能的成功部分。如何将结果传递给第二个电话?

app.controller('joDetailCtrl',
function ($modal, $scope, $http, modalService, dataFactory, $routeParams) {

    dataFactory.getJobOrder($routeParams.joNumber)
        .success(function (order) {
            $scope.status = 'Retrieved job order details';
            $scope.order = order;
        })
        .error(function (error) {
            $scope.status = 'Error retrieving job order details ' + error.message;
        });

    dataFactory.getJobOrderDetails(order[0].customerID, order[0].jobOrderID)
        .success(function (details) {
            $scope.status = 'Retrieved job order line items';
            $scope.details = details;
        })
        .error(function (error) {
            $scope.status = 'Error retrieving line items' + error.message;
        });
});

3 个答案:

答案 0 :(得分:0)

观察范围内的顺序:

$scope.$watch("order", function(newValueOfOrder){
  //call your other function here if newValueOfOrder is set

});

答案 1 :(得分:0)

由于函数是异步的,因此getJobOrder可能无法完全执行并且在调用getJobOrderDetails之前分配了范围变量,因此未定义。你可以链接承诺。

你明白了吗? Plunker http://plnkr.co/edit/bzMhsW

angular.module('app', [])

  // Controller
  .controller('Ctrl', function($scope, $q, dataFactory) {
    // Get some order and it's details
    $scope.status = 'Please wait...';
    getOrder({ joNumber: 123 }).then(getDetails);

    // Wrapper for factory 
    function getOrder(job) {
      return dataFactory.getJobOrder(job.joNumber)
        .then(function(order) {
          $scope.status = 'Retrieved job order';
          $scope.order = order;
          return $q.when(order);
        });
    }

    // Other wrapper for factory    
    function getDetails(order) {
      return dataFactory.getJobOrderDetails(order[0].customerID, order[0].jobOrderID)
        .then(function(details) {
          $scope.status = 'Retrieved order line items';
          $scope.details = details;
        });
    }
  })

  // Mock data factory
  .factory('dataFactory', function($q, $timeout)  {
     return {
        getJobOrder: function(joNumber) {
          return $timeout(function() {
            return $q.when([{
              customerID: Math.floor((Math.random() * 10) + 1),
              jobOrderId: joNumber
            }]);          
          }, 1000);
        },  
        getJobOrderDetails: function(customerID, jobOrderID) {
          return $timeout(function() {
            return $q.when({
              details: 'details'
            });
          }, 1000);
        }
      };
  });
<body ng-controller="Ctrl">
  <div>status:{{ status }}</div>
  <div>order:{{ order | json }}</div>
  <div>details:{{ details | json }}</div>
</body>

答案 2 :(得分:0)

我没有以与appfactories相关的方式设置我的控制器。但是,在我的应用程序中,我使用了控制器中一个函数的结果,并将它传递给同一个控制器中的另一个函数。

此示例使用d3js中的条形图,因此我删除了misc。材料,所以它不会延长这个答案。只关注我示例中的$ scope.bardata。这就是我正在使用的“正在传递给另一个函数的结果”,如你的问题中所述。

我只是设置了一个全局$ scope.bardata变量,可以通过我的控制器中的任何函数访问它。在这种情况下,我正在进行异步调用,抓取数据,然后将数据传递给我控制条形图显示的其他函数。

所以在下面的例子中,我有我的控制器“ResultsCtrl”和我的两个函数“d3j”(条形图显示)和“getResultsWaiting”(异步调用数据显示到条形图)。在两个函数之间传递的结果称为“bardata”。我将这个“bardata”设置为控制器内的全局范围。您会看到它被视为“$ scope.bardata”并未包含在任何功能中。它不属于职能部门。

这是我的代码:

conferenceApp.controllers.controller('ResultsCtrl', function($scope, $log, $routeParams){

    $scope.bardata = $scope.bardata || {};

    $scope.d3j = function () {
        var bardata = $scope.bardata;
        var names = ['Hangout1', 'Hangout2', 'Hangout3'];
        ...etc etc.
        };

    $scope.getResultsWaiting = function () {

    gapi.client.conference.getResultsWaiting({
        webSafeKey: $routeParams.webSafeKey
    }).
        execute(function(resp){
            $scope.$apply(function() {
                if (resp.error){
                    $log.error('There was an Error');
                }
                else {
                    $log.info("Success");
                    $scope.webSafeKey = $routeParams.webSafeKey;

                    $scope.results = []
                    $scope.result=[]
                    angular.forEach(resp.items, function(result){
                        $scope.results.push(result);
                    });
                    $scope.bardata = JSON.parse(resp.items[0]['finalResults']);
                    $scope.d3j();
                    ...etc etc.
                    };

因为我使用$ scope.bardata作为全局,所以我可以在一个控制器中的函数之间传递它。

希望这可以为你提供更多的想法。