javascript - 从服务获取异步数据后，Angular js 更新范围出现问题

Question

我喜欢在 Angular js 中实现对 http 资源的搜索。只要我从结果页面以外的任何其他页面进行搜索，一切都很好。如果我再次在结果页面搜索，我会得到结果对象，但范围不会更新。您可以在此处找到此行为的示例: Example page 。

重现步骤:

1. 在菜单栏的搜索字段中输入“pax6”。确认您已被转发到结果页面。
2. 留在搜索页面，在搜索字段中输入 pax8。您将收到对象，但范围不会更新。
3. 点击搜索以外的任何其他链接
4. 再次点击搜索，现在 View 显示正确的值

以下是我实现该功能的方法:

angular.module('gp3').controller('SearchController',function($scope,$location,SearchService,$http) {
    $scope.keyword="";
    $scope.options={};
    $scope.results = SearchService.getResults();
    $scope.search = function() {
               SearchService.search($scope.keyword,$scope.options).then(function(data) {
                                $scope.results = data;
                                console.log(data);
                                $location.path('/search');
                        },function(reason) {
                                $scope.results = [];
                                $location.path('/search');
                        });
                };})

    .factory('SearchService',function($http,$q) {
        var SearchService = {};
        var results = [];

        SearchService.getResults = function() {
                return SearchService.results;
        };

        SearchService.search = function(keyword,options,callback) {
                        var def = $q.defer();
                        $http.get("/api/search/" + keyword,options)
                                 .success(function(data,status,headers,response){
                                        SearchService.results = data;
                                        def.resolve(data);
                                })
                                .error(function(status,headers,response){
                                        def.reject("Failed to search");
                                })
                        return def.promise;

                };
        return SearchService;})

我在 stackoverflow 上看了很多，但我只能找到在 Controller 加载时调用异步(搜索)函数的解决方案，而不是单击按钮。如果我错过了任何信息或问题格式不正确，请告诉我，这是我要问的第一个问题。谢谢。

Answer 1

AngularJS 中的 Controller 被设计为一个包含的结构 - 它不是一个单例。您已经定义了两个单独的 SearchController 实例，一个在菜单中，另一个在结果页面中。

它在第一次搜索中起作用的原因是因为您更新了 SearchService 的数据，然后移动到结果 View (它会在加载时更新自身以加载服务数据)

您可以在此处看到您有两个不同的范围，以及两个不同的搜索结果数组。菜单栏中的搜索 Controller :

主页中的搜索 Controller :

解决方案是使用该服务作为搜索结果的“所有者”，并从 Controller 访问这些结果。这意味着将 SearchService 暴露给 $scope，并在您的 View 中使用 in，例如:

.controller('SearchController',function($scope,$location,SearchService,$http) {
    $scope.keyword="";
    $scope.options={};
    $scope.group;
    $scope.SearchService = SearchService;

在你的模板中，做

<div ng-repeat="result in SearchService.getResults()"></div>