使用承諾$ scope的問題

我試圖設置一個簡單的控制器，使用服務進行異步http調用。我爲我編寫的另一個控制器設置了非常相似的東西，但由於某種原因，這個控制器無法正常工作。這個console.log（$ scope.art）;在then（）塊中的行輸出正確的數據，但是一旦它不在then（）塊中，$ scope.art就是未定義的。爲什麼會這樣？我很困惑！

app.controller('FeedbackController', ['$scope','getArt', function($scope, getArt) { 
     var art = getArt(); 
     art.then(function(result) { 
      $scope.art = result; 
      console.log($scope.art); 
     }, function(reason) { 
      $scope.error = reason; 
     }); 
     console.log($scope.art); 
}]) 
.factory('getArt', ['$http', '$q', function($http, $q) { 
    return function() { 

     var deferred = $q.defer(); 
     $http.post("/php/getArt.php") 
      .success(function (response) { 
       if (response == "nope") { 
        deferred.reject("Whoopsie! Something seems to have gone wrong."); 
       } else { 
        deferred.resolve(response); 
       } 
      }) 
      .error(function() { 
       deferred.reject("There seems to be an issue with your connection."); 
      }); 
     return deferred.promise; 
    }; 
}]);

非常感謝！

來源

2016-09-18 Carter Scott Davis

http調用是異步的，因此你console.log($scope.art);執行之前的http調用完成。您可以在then回調中執行任何後期處理。

或者，如果您只需要顯示用戶的art對象，它將在服務器返回dat後立即出現。也許你可以添加這樣的東西來表示數據beeing從服務器加載：

<div ng-if="!art">loading...</div> 
 
<div ng-if="art">... display it for the user ...</div>

來源

2016-09-18 05:29:23

哦，老天爺我是一個傻瓜的文章！這很有意義。謝謝！ –

歡迎來到javascript＆async @CarterScottDavis :) –

在下面的代碼

app.controller('FeedbackController', ['$scope','getArt', function($scope, getArt) { 
    var art = getArt(); 
    art.then(function(result) { 
     $scope.art = result; //line 4, executed some time in the future 
     console.log($scope.art); //line 5 
    }, function(reason) { 
     $scope.error = reason; 
    }); 
    console.log($scope.art); //line 9, synchronously, executed right away 
}])

線9被右後立即執行調用服務器被觸發，這是行4和行5（當承諾履行時），所以當發生這種情況$ scope.art仍然是undefined（或仍然有一些舊值）

僅供參考，下面的解釋JavaScript的異步真的很好http://tutorials.pluralsight.com/front-end-javascript/introduction-to-asynchronous-javascript

來源

2016-09-18 05:45:04

使用承諾$ scope的問題

回答

相關問題