Question

Angular和javascript有点新鲜。我有以下控制器编写使用工厂服务来访问本地JSON文件。大部分代码都是从this post by Dan Wahlin派生（或完全采用）的。我无法访问函数外部的$ scope.books变量，无法弄清楚原因。函数内的console.log为我提供了我正在寻找的对象，但是外部的对象返回undefined。我在这做错了什么？感谢。

// UsersController.php

   public function update(Request $request, $id)
    {
        $user = User::find($id);
        if (!$user) {
            return $this->respondNotFound('User not found');
        }
        $input = $request->all();
        $input = array_filter($input, 'strlen');
        //$user->update($input);
        //Get array of school records
        // $user->educatoion->push($records) // don't know what will come here to update the education table
        // or may be $user->push(); // don't know
        return $this->respond([
            'data' => $user,
        ]);
    }

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

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

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

3 个答案: