Angular $scope 在我的函数之外不可用

Question

Angular 和 javascript 有点新。我编写了以下控制器，使用工厂服务访问本地 JSON 文件。此代码的大部分源自（或完全采用）this post by Dan Wahlin。我无法在函数外部访问 $scope.books 变量，也无法弄清楚原因。函数里面的 console.log 给了我要找的对象，但是 returns 外面的那个没有定义。我在这里做错了什么？谢谢

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 函数是异步执行的，所以当您的控制台日志发生时，它很可能没有绑定到任何东西。您可以使用 interval 轻松测试它以查看这是如何发生的：

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 服务来处理带有 promises 的异步代码：

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

} ] );

我还没有测试过这段代码，但它应该可以工作并向您展示 promises 原则。有关 $q 服务的更多信息：https://docs.angularjs.org/api/ng/service/$q

Angular $scope 在我的函数之外不可用

Angular $scope not available outside my function

javascript

ajax

asynchronous

angularjs

angularjs-http