Angular从$ http请求获取数据给出undefined

所以，我想从API获取数据（由Laravel提供）。我在Angular中使用$ http来获取这些数据，并且当我将它发送给我的视图时，它工作正常，但是当我想要使用控制器内部的数据时，它不会：

HTML：

<!doctype html> 
<html ng-app="todoApp"> 
    <head> 
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
     <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
     <script src="/js/MainController.js"></script> 
    </head> 
    <body ng-controller="MainController as myControl"> 
     <h1>Todo-list:</h1> 
     <div> 
      <table> 
       <tr> 
        <th>Note:</th> 
        <th>Author:</th> 
        <th>Project:</th> 
        <th>Created:</th> 
        <th>Deadline:</th> 
       </tr> 
       <tr ng-repeat="todo in myControl.todos"> 
        <td> {{ todo.content }} </td> 
        <td> {{ todo.user }} </td> 
        <td> {{ todo.project }} </td> 
        <td> {{ todo.created }} </td> 
        <td> {{ todo.deadline }} </td> 
        <td><button ng-click="myControl.showUpd(todo.id)">Update</button></td> 
       </tr> 
      </table> 
     </div> 
    </body> 
</html>

角控制器：

angular.module('todoApp', []).controller('MainController', function($scope, $http) { 
    var thisApp = this; 

    // Below works without any problems when accessing it from the html-view: 

    $http({method : 'GET', url : 'http://localhost:8000/notes'}) 
     .then (function(response) { 
      thisApp.todos = response.data; 
     }, function() { 
      alert("Error getting todo notes"); 
     }); 

    // But this function doen't work as intended 

    thisApp.showUpd = function(noteID) { 
     $http({method : 'GET', url : 'http://localhost:8000/notes/' + noteID}) 
      .then (function(response) { 
       thisApp.getNote = response.data; 
       console.log(thisApp.getNote); // MainController.js:20 
       alert("Got data"); 
      }, function() { 
       alert("Error getting todo note"); 
      }); 

     console.log(thisApp.getNote); // MainController.js:26 
    } 
});

控制台使我有以下几点：

MainController.js:26 undefined
MainController.js:20 Object {id: 1, content: "asdasd", completed: 0, deadline: "2016-01-14 10:29:38"}

我的问题是，当我访问thisApp.getNote的$http内它工作正常，但是当我尝试到外面访问它，我只得到了一个未定义。我试图改变thisApp到$scope andd我也试图在函数内声明另一个var，它们都没有任何区别。

任何人都可以发现我的问题吗？

来源

2016-01-05 BluePrint

$ HTTP是异步的，这意味着你火了各地的17行的请求，然后执行线26由于要求有不回来，'thisApp.getNote'尚未设置，所以它是未定义的。它在$ http之外是“可用的”，但是只有在它被设置之后才可用，直到$ http调用被解析为止，这在将来某个时候（如果有的话）才会发生。 –

@sethflowers我看到了，你有什么好的解决方案吗？就像把它放在另一个功能或其他东西？ – BluePrint

没有真正的问题。它正在做它应该做的事情。你发起了一个http请求，当它返回时，你设置了一些数据。你已经在做这个。在设置之前，它永远不会是未定义的。 –

您的第26行的console.log包含在使用$ http创建的承诺之外。这意味着它将在承诺解决之前运行并且因此在属性设置之前运行，以便在该时间点返回undefined。您需要等到您解决了承诺尝试使用该属性之后。

您应该创建。然后里面的回调为您的$ HTTP调用

thisApp.showUpd = function(noteID) { 
    $http({method : 'GET', url : 'http://localhost:8000/notes/' + noteID}) 
     .then (function(response) { 
      thisApp.getNote = response.data; 
      console.log(thisApp.getNote); // MainController.js:20 
      alert("Got data"); 
      thisApp.logMe(); // Call the callback here to run the code that depends on thisApp.getNote being defined. 
     }, function() { 
      alert("Error getting todo note"); 
     }); 
} 

// Create a callback function that will be called when the $http promise has been resolved but not until then. 
thisApp.logMe = function() { 
    console.log(thisApp.getNote); // MainController.js:26 
}

来源

2016-01-05 20:17:46 efarley

Angular从$ http请求获取数据给出undefined

回答

相关问题