AngularJS - доступ возвращаемой переменной методы области видимости в другом методе

Question

я имею угловое приложение с обслуживанием и регулятором,:

service.js

.factory('MyService', function ($http, $q) { 
    var api_url = 'http://localhost/api/'; 

    var MyService = { 

     list: function (items_url) { 
      var defer = $q.defer(); 
      $http({method: 'GET', 
       url: api_url + items_url}). 
       success(function (data, status, headers, config) { 
        defer.resolve(data); 
       }).error(function (data, status, headers, config) { 
        defer.reject(status); 
       }); 
      return defer.promise; 
     }, 
     ... 
    } 
}); 

controller.js

.controller("ItemsCtrl", function ($scope, MyService) { 

    $scope.getItems = function() { 
     MyService.list('items/').then(function(data) { 
      $scope.items = data; 
     }); 
    }; 

    $scope.addItems = function() { 
     $scope.getItems(); 

     // why is this undefined ??!!! 
     console.log($scope.items); 
    }; 

Проблема в том, что я хочу вызвать метод $scope.getItems внутри $scope.addItems способ. Возможно, мне нужно использовать $scope.apply(), так как возвращаемое значение является обещанием?

Я думаю, что я отображая здесь общее недопонимание:/

Любая помощь будет оценена.

Answer 1

Изменить ваш контроллер, как это:

.controller("ItemsCtrl", function ($scope, MyService) { 

    $scope.getItems = function() { 
     return MyService.list('items/').then(function(data) { 
      $scope.items = data; 
     }); 
    }; 

    $scope.addItems = function() { 
     $scope.getItems().then(function() { 

      // should be what you want this time 
      console.log($scope.items); 

     }); 
    }; 

Ваша проблема в том, когда вы звоните $scope.getItems(), ответ HTTP еще не вернулся, поэтому $scope.items не заполняется. Вы должны дождаться, когда все обещания будут разрешены для доступа к items.

Answer 2

$scope.items не определено, потому что $http является асинхронного связи. То есть, когда вы вызываете $scope.addItems(), он создает и отправляет запрос для извлечения списка элементов, а затем сразу переходит к следующей строке кода, которая должна записывать $scope.items на консоль. Поскольку в $scope.items ничего нет, вы получаете неопределенное значение.

Если вы хотите использовать данные, возвращенные http-вызовом, вы должны гарантировать, что данные будут заполнены. Другими словами, любые операции, которые вы хотите выполнить на $scope.items, должны быть вызваны в ваш блок .then().

$scope.$apply() используется, когда вы не выполняете в контексте AngularJS, чтобы заставить структуру AngularJS оценивать выражение. Это вам не поможет - вы получите сообщение об ошибке «$ digest уже в процессе» или что-то в этом роде.

Попробуйте это:

.controller("ItemsCtrl", function ($scope, MyService) { 

    $scope.getItems = function() { 
    MyService.list('items/').then(function(data) { 
     $scope.items = data; 
     console.log($scope.items); 
    }); 
    }; 

    $scope.addItems = function() { 
    $scope.getItems(); 
    }; 
}); 

Answer 3

Это потому, что $scope.getItems является асинхронным. Ваш обратный вызов (который добавляется через него) вызывается после выполнения $scope.addItems.