2016-10-04 144 views
0

我有一個工作角形式坐在應用程序(導軌應用程序)內。它發送一個get請求到一個rails服務器。角度獲取請求

問題是,如果這個應用程序收到一個正常的請求,它會刷新頁面。但是,當通過角度發送請求時,我可以在服務器上看到請求,但該頁面從不刷新。 (我可以使用這些獲取請求來獲取數據)。

問題是如何以角度形式傳遞get請求,以便服務器正常處理它並刷新頁面?

HTML:

<form ng-submit="submitForm()" style="margin-top:30px;"> 
    <h3>get request</h3> 
    <button type="submit" class="btn btn-primary">Get</button> 
</form> 

app.js控制器:

$scope.submitForm = function(){ 
    posts.factorySubmit(); 
}; 

app.js工廠獲得功能:

o.factorySubmit = function() { 
     $http.get('http://localhost:8080/clients'); 
}; 

--side注 - 如果我創建了一個GET請求,在應用程序中使用常規的java腳本,在角度上下文之外,我得到預期的行爲,頁面刷新。

+0

'$ http.get'是一個AJAX調用,它不會刷新頁面。但通常你不想在角度應用中重新加載頁面。你爲什麼要重新加載它? – nagyf

+0

是否要重新加載以顯示來自GET的數據? – Wandrille

+0

我需要服務器處理一系列在rails中發生的邏輯,並用該新邏輯重新加載頁面。基本上,我不想重寫角度上的所有邏輯.. – HoosierCoder

回答

4

你已經把你的$ http包裝在一個非常好的工廠裏。你沒有做的是捕捉到迴應。

o.factorySubmit = function() { 
     // Add a return here 
     return $http.get('http://localhost:8080/clients'); // This call returns a promise 
}; 

然後當你調用這個函數...

$scope.submitForm = function(){ 
    posts.factorySubmit().then(function(response) { 
    $scope.requests = response.data; // This is where you get your response 
    }, 
    function(response) { 
    // This is your error handling 
    }); 
}; 

很酷的事情有關的角度是,它會發現變化並自動更新頁面。它有一個摘要循環,內部響應變化而被調用。由於您使用的是內置的$http提供程序,因此在更新$scope變量時它會刷新。

+0

所以,我把你的編輯。角度接收的數據被刷新。問題是,它仍然不刷新頁面。它必須刷新,以便應用程序按照軌道路由器並通過邏輯,根據獲取請求:( – HoosierCoder

+0

rails邏輯需要做什麼?也許當您接到呼叫時,您可以發佈以執行任何服務器可能你遇到了我開始將ASP.NET MVC與AngularJS混合使用時碰到的同一個問題,這是一種新的思考方式 – Zach

+0

它從獲取請求中接收參數,解析數據並繪製圖表 – HoosierCoder

0

Angular在設計上應該不會刷新頁面,因爲它是爲單頁面應用程序構建的。如果你想手動刷新頁面,使用

$scope.submitForm = function(){ 
    posts.factorySubmit().success(function(){ 
    $route.refresh(); 
    }); 
}; 

在你$get請求的成功作用。請記住將$route注入您的控制器。

+0

我試過這個,但由於某種原因,只要我注入$ route,就會中斷應用程序。這個控制器代碼看起來正確'。控制器( 'MainCtrl',[ \t '$範圍', \t '$路線', \t '信息', \t函數($範圍,$路線,柱){ \t $ scope.posts =職位。訊息; \t $ scope.submitForm =函數(){ \t \t posts.factorySubmit()成功(函數(){ \t \t $ route.refresh(); \t \t}); \t}; \t} ])' – HoosierCoder

+2

根據$ http文檔,.success()現在不推薦使用 - 使用標準的.then()回調代替 https://docs.angularjs.org/api/ng/service/$ http –