javascript - AngularJS - $http 绑定(bind)参数

Question

我搜索了又搜索，但也许我不知道用什么词来表示我正在尝试做的事情。这是我第一次尝试使用 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;
    }
}

这样，我的函数就可以正确绑定(bind)，并且我的 h1 标记中的代码会动态更新。我想要做的是根据搜索字符串动态更新 $http get 请求的结果。我在 Controller 中有这样的代码，它会执行 - 但不会在每次绑定(bind)变量更新时更新。

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

我确定我错过了 AngularJS 的一个主要概念/组件。每次绑定(bind)变量更改时如何触发 $http 调用？

感谢您提供的任何帮助!

编辑

使用参数对象尝试@Sprottenwels 提出的机会:

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

调用没有错误，但两个参数在 Chrome 控制台中都显示为空白 (results.php?fname=&lname=)

编辑2

在加载页面时，会进行以下调用:

results.php?fname=&lname=

$scope 的日志显示了以下相关元素:

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

有道理。使用页面上的输入框编辑绑定(bind)变量会更新 searchString(使用 {{ searchString() }} 正确显示在 h1 标记中)- 但不会再次调用 $http。

Answer 1

$http.get 想要传递一个 params 对象。

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

参见 list of accepted parameters了解更多信息。 (在那里，在“用法”下方)