$http.get 的角度问题答案

【问题标题】：Angular trouble with $http.get$http.get 的角度问题
【发布时间】：2016-04-18 15:54:50
【问题描述】：

我刚开始学习 Angular，但在基于 http-get 请求检索数据时遇到了问题。当我简单地检索所有电影时，它可以工作，但当我尝试根据搜索词检索电影时（cfr. search.html）就不行了。我希望有人能告诉我我哪里出错了，我真的看不到它。提前谢谢你。

app.js：

var app;

(function() {

  app = angular.module('imdb', ['ngRoute']);

  app.config(function($routeProvider) {
    $routeProvider
      .when('/search', {
        controller: 'SearchController',
        templateUrl: 'views/search.html' 
      })
      .when('/movies', {
        controller: 'MovieController',
        templateUrl: 'views/movies.html' //works fine
      })
      .otherwise({
        redirectTo: '/movies'
      });
  });
})();

SearchController.js

(function (app) {

  app.controller('SearchController', ['$http', '$scope', function ($http, $scope) {
    $scope.movies = [];

    $scope.searchMovie = function(title) {
      $http.get('https://angularbackend.azurewebsites.net/api/Movies/Search?title=' + title)
        .success(function(data) {
          $scope.movies = data;
        });
    };
  }]);
})(app);

search.html

<div>
  <form class="form" novalidate name="searchMovies" ng-submit="SearchController.searchMovie(title)" >
    <input type="text" ng-model="title" class="form-control" placeholder="enter title">
    <button type="submit" class="btn btn-primary btn-block">Search</button>
  </form>
  <table class="table">
    <thead>
    <tr>
      <th>poster</th>
      <th>title</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="movie in movies">
      <td>{{ movie.title }}</td>
    </tr>
    </tbody>
  </table> 
</div>

【问题讨论】：

您是否尝试将https://angularbackend.azurewebsites.net/api/Movies/Search?title=someTitle 粘贴到浏览器中以确保您的后端正确响应？
什么异常不起作用？你得到错误的数据吗？还是您的 APi 呼叫没有被触发，您在拨打电话时收到 404 还是您的标题为空...？

标签： angularjs search http-get

【解决方案1】：

替换

SearchController.searchMovie(title)

由

searchMovie(title)

所有表达式总是在作用域上计算。所以第一个，不正确的，会尝试调用$scope.SearchController的方法searchMovie，这个方法不存在。

另请注意，success() 已被弃用了一段时间。使用 then():

$http.get('https://angularbackend.azurewebsites.net/api/Movies/Search?title=' + title)
    .then(function(response) {
      $scope.movies = response.data;
    });

您还应该避免使用字符串连接来传递参数。这些需要正确编码。所以宁可使用

$http.get('https://angularbackend.azurewebsites.net/api/Movies/Search', {params: {title: title}})
    .then(function(response) {
      $scope.movies = response.data;
    });

【讨论】：