Угловая $ scope недоступна вне моей функции

Question

Немного нова для Angular и javascript. У меня есть следующий контроллер, который использует фабричную службу для доступа к локальному файлу JSON. Большая часть этого кода получается (или полностью взята) от this post by Dan Wahlin. Я не могу получить доступ к переменной $ scope.books вне функции и не могу понять, почему. Консоль.log внутри функции дает мне объект, который я ищу, но один внешний возвращает undefined. Что я здесь делаю неправильно? Благодарю.

app.controller('FormController', ['$scope', 'tocFactory', function ($scope, tocFactory) { 

    $scope.books; 

    getBooks(); 

     function getBooks() { 
     tocFactory.getBooks(). 
      success(function(data, status, headers, config) { 
      $scope.books = data; 
      console.log($scope.books); 
      }). 
      error(function(data, status, headers, config) { 
      // log error 
    }) 
    } 
    console.log($scope.books); 
    }]); 

Answer 1

Потому что вы делаете ajax и затем выполняете следующую строку кода. Это не значит, что у вас есть гарантия, что ваш ответ ajax готов к выполнению следующей строки кода.

Вы всегда можете получить его значение отклика внутри функции успеха $http, которая вызывается при успешном выполнении ajax-вызова.

Читать здесь How asynchronous call works?

Answer 2

на самом деле это не проблема масштаба, но сроки. Функция getBooks выполняется асинхронно, поэтому при возникновении вашего консольного журнала это, скорее всего, не будет связано ни с чем. Вы можете проверить это легко с интервалом, чтобы увидеть, как это происходит:

app.controller('FormController', ['$scope', 'tocFactory', function($scope, tocFactory) { 
    $scope.books; 
    getBooks(); 
    function getBooks() { 
    tocFactory.getBooks() 
     .success(function(data, status, headers, config) { 
     $scope.books = data; 
     console.log($scope.books); 
     }) 
     .error(function(data, status, headers, config) { 
     // log error 
     }) 
    } 
    setInterval(function(){ 
    console.log($scope.books); 
    }, 1000); 
}]); 

Answer 3

Вы можете использовать $ Q сервис для обработки асинхронного кода с обещаниями:

app.controller('FormController', ['$scope', '$q', 'tocFactory', function ($scope, $q, tocFactory) 
{ 

    var getBooks = function() 
    { 
     var deferred = $q.defer(); 

     tocFactory.getBooks(). 
     success(function(data, status, headers, config) 
     { 
      $scope.books = data; 
      deferred.resolve(); 
     }). 
     error(function(data, status, headers, config) 
     { 
      deferred.reject(); 
     }); 

     return deferred.promise; 
    }; 

    getBooks().then(function(res) 
    { 
     console.log($scope.books); // success : your data 
    }, function(res) 
    { 
     console.log($scope.books); // error : undefined 
    }); 

    console.log($scope.books); // undefined 

} ]); 

Я не проверял этот код, но он должен работать и показывать вам принцип обещаний. Подробнее о сервисе $ q: https://docs.angularjs.org/api/ng/service/ $ q