AngularJS - 具有綁定參數的$ http

我已經搜索和搜索，但也許我不知道這些詞來表示我正在嘗試做什麼。這是我第一次使用AngularJS進行應用程序嘗試，並希望能夠提供任何指導。

我有一個基本的HTML頁面如下：

<div ng-app="testApp"> 
    <div ng-controller="SearchCtrl"> 
     <input type="text" ng-model="params.firstName"> 
     <input type="text" ng-model="params.lastName"> 
     <h1>{{ searchString() }}</h1> 

     <table> 
      <tr ng-repeat="employee in results"> 
       <td>{{employee}}</td> 
      </tr> 
     </table> 
    </div> 
</div>

我已經包含了AngularJS庫以及包含以下我自己的app.js文件：

var testApp = angular.module('testApp' []); 

testApp.factory('Data', function() { 
    return { 
     firstName: "", lastName: "" 
    } 
}) 

function SearchCtrl($scope, Data, $http) { 
    $scope.params = Data; 

    $scope.searchString = function() { 
     return 'fname=' + $scope.params.firstName + '&lname=' + $scope.params.lastName; 
    } 
}

有了這個，我的函數正確綁定，我的h1標籤內的代碼動態更新。我想要做的是根據搜索字符串動態獲取$ http get請求更新的結果。我在控制器內部有這樣的代碼，它會執行 - 但每次綁定變量更新時都不會更新。

$http.get('results.php?' + $scope.searchString) 
    .then(
     function(res) { 
      $scope.results = res.data; 
});

我確定我錯過了AngularJS的一個主要概念/組件。每次綁定變量更改時，如何觸發$ http調用？

感謝您提供的任何幫助！

編輯

試圖通過@Sprottenwels建議的機會，使用params對象：

$http.get('results.php?', { 
    params: { fname: $scope.firstName, lname: $scope.lastName } 
}) 
.then(function(res) { 
     $scope.results = res.data; 
    }); 
});

通話時沒有錯誤，但兩者PARAMS拿出空白在Chrome控制檯（結果。 PHP？FNAME = & L-NAME =）

編輯2

在頁面laoded的時候，下面的調用由：

results.php?fname=&lname=

日誌$範圍顯示以下相關內容：

params: firstName: "", lastName: "" 
searchString: function() { ... }

有道理。使用頁面上的輸入框編輯綁定變量會更新searchString（使用{{searchString（）}}正確顯示在h1標記中），但不會再次進行$ http調用。

來源

2014-01-14 user3194397

我不得不承認，我在智慧的結尾。您可以在您撥打電話併發布結果的時刻使用console.log（）'您的$ scope屬性嗎？ – Sprottenwels

我相信你正在過度複雜你的問題。你不需要自己構建searchString，Angular會爲你處理這個問題：在'params'對象中給出的屬性將連接到一個正確工作的'get'。另外，什麼是觸發電話？ – Sprottenwels

根據我的編輯2，我實際上並沒有在該上下文中使用searchString - 僅用於在頁面上顯示。我的問題是，沒有任何事情可以觸發該呼叫。我認爲控制器中的代碼是在綁定變量發生變化時執行的 - 這是我的問題。 – user3194397

$ http.get想要傳遞一個params對象。

$http.get('results.php',{ 
      params:{ 
       searchString: $scope.searchString 
      } 
     }).then(function(promise){ 
      // ... 
     });

查看list of accepted parameters瞭解更多信息。（在下面，'用法'下面）

來源

2014-01-14 14:53:37 Sprottenwels

我試過類似的東西，和我的其他代碼一樣，該調用使用參數執行，但傳遞$ scope.params.firstName會導致「空白」調用。我可以看到在Chrome控制檯中調用的調用有：results.php？fname =＆lname = – user3194397

請提供代碼示例/小提琴你的第二次嘗試 – Sprottenwels

我是新來的，我在哪裏添加這個？到原來的問題？或者作爲一個單獨的答案？）'code' $ http.get（'results.php？'，{ params：{fname：$ scope.firstName，lname：$ scope.lastName} }） .then（function res）{ $ scope.results = res.data; }）; }）; – user3194397

有一個答案出現在這裏，然後消失 - 但我抓住了它，並能夠得到我所需要的。感謝誰發佈它 - 抱歉，我不能給你信貸，我沒有聽到你的名字。

顯然我在找的是$ watch功能。通過觀察一個變量，我發現每次改變時都會發生$ http調用。

$scope.$watch($scope.firstName, function() { 
    $http.get('results.php', { 
     params: { 
      fname: $scope.params.firstName, 
      lname: $scope.params.lastName 
     } 
    }) 
    .then(
     function(res) { 
      $scope.results = res.data; 
     }); 
});

我重複了這個watchName參數的手錶代碼。

希望這可以幫助有同樣問題的其他人。感謝Sprottenwels協助解決我的第一個SO問題！

來源

2014-01-14 19:41:47 user3194397

AngularJS - 具有綁定參數的$ http

回答

相關問題