双向绑定似乎不起作用。列表不会自动更新

Question

我遇到麻烦更新列表。起初，我通过从$ http.get请求获取信息来填充我的列表。后来我在文本框中输入了一些内容，然后尝试使用$ http.post请求的响应更新列表。

我确实收到回复，并且收到了数据。当我覆盖$ scope中的变量时，列表不会更新。

我的代码如下所示：

'use strict'; 
 

 
angular.module('myApp.friends', ['ngRoute']) 
 

 
    .config(['$routeProvider', function ($routeProvider) { 
 
     $routeProvider.when('/friends', { 
 
      templateUrl: 'friends/friends.html', 
 
      controller: 'FriendsCtrl' 
 
     }); 
 
    }]) 
 

 
    .controller('FriendsCtrl', function ($scope, $http, $timeout, UserService) { 
 
     $scope.items = []; 
 

 
     $scope.formSearchData = {}; 
 

 
     UserService.getAll().then(function(data) { 
 
      var remoteItems = data; 
 

 
      for (var i = 0; i < remoteItems.length; i++) { 
 
       var object = {}; 
 
       object.name = remoteItems[i].name; 
 
       object.id = remoteItems[i]._id; 
 
       $scope.items.push(object); 
 
      } 
 
     }); 
 

 
     $scope.itemClick = function(value) { 
 
      console.dir(value); 
 
     }; 
 

 
     $scope.submitForm = function() { 
 
      //debugger; 
 
      $scope.items[0].name = "John D"; 
 
      UserService.getSearchResult($scope.formSearchData).then(function(data) { 
 
       getSearchResult(data); 
 
      }); 
 
     }; 
 

 
     function getSearchResult(data) { 
 
      var remoteItems = data.records; 
 
      $scope.items = []; 
 
      for (var i = 0; i < remoteItems.length; i++) { 
 
       var object = {}; 
 
       object.name = remoteItems[i].name; 
 
       object.id = remoteItems[i].id; 
 
       $scope.items.push(object); 
 
      } 
 
     } 
 
    }) 
 

 
    .controller('navigationcontroller', function ($scope, $location) { 
 
     $scope.isActive = function(viewLocation) { 
 
      return viewLocation = $location.path(); 
 
     } 
 
    });

<div class="panel panel-title"> 
 
    <div class="panel-body"> 
 
     <div class="friend-search" ng-controller="FriendsCtrl"> 
 
      <form ng-submit="submitForm()"> 
 
       <input type="search" name="search" placeholder="Zoek vrienden" class="form-control" ng-model="formSearchData.search"> 
 
      </form> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div class="panel panel-title"> 
 
    <div class="panel-default"> 
 
     <div class="scrollable-content" ui-scroll-bottom='bottomReached()' ng-controller="FriendsCtrl"> 
 
      <div class="list-group"> 
 
       <a ng-repeat="item in items" ng-model="items" class="list-group-item" ng-click="itemClick(item)"> 
 
        {{ item.name }} 
 
       </a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

的UserService是一个工厂，有两个功能，一个是GET请求，一个用于POST请求。它看起来像这样：

angular.module('myApp').factory('UserService', function($http) { 
 
    return { 
 
     getAll: function() { 
 
      return $http.get('http://localhost:3030/user/all').then(function(response) { 
 
       return response.data; 
 
      }); 
 
     }, 
 

 
     getSearchResult: function(query) { 
 
      return $http.post('http://localhost:3030/user/search', query, { 'Content-Type': 'application/json' }).then(function(response) { 
 
       return response.data; 
 
      }); 
 
     } 
 
    }; 
 
});

我看了一些关于$范围被淘汰的范围，并尝试使用$ scope.apply解决它（）或$范围$消化，但我得到。错误，当我尝试。此外，我试图在html中添加跟踪，但这似乎也不起作用。

正如你所看到的，我也尝试硬编码更新列表，这似乎也没有工作。

我对Angular很陌生，现在这让我很忙。我希望有一个人可以帮助我。对我的代码的任何建议也欢迎;）。谢谢！

Answer 1

这是一个只用一个控制器工作的代码。我修改了一下，因为我没有你的API端点，但返回的对象是一个承诺，因此数据得到正确显示。

http://plnkr.co/edit/iEWBm6QE2pmFqbsU6EiB?p=preview

你有心你的代码不工作的原因是因为你已经在HTML中声明的控制器的两倍。

从角文档：

“当一个控制器连接到经由NG-控制器指令的DOM，角将实例化新的控制器对象，使用指定的控制器的构造函数的新的子范围将被创建并作为$ scope的控制器构造函数的可注入参数提供。“

含义：

当你声明另一个NG-控制器，它有自己的子范围，它不与任何其他控制器共享范围。并且您的项目仅在一个范围内声明。

相关代码：

var app = angular.module("myApp", []); 

app.controller('myCtrl', ['$scope', 'UserService', function($scope, UserService){ 

    $scope.items = []; 

    $scope.formSearchData = {}; 

    UserService.getAll().then(function(data) { 
     $scope.saved = data; 

     for (var i = 0; i < $scope.saved.length; i++) { 
      var object = {}; 
      object.name = $scope.saved[i].name; 
      object.id = $scope.saved[i]._id; 
      $scope.items.push(object); 
     } 
    }); 

    $scope.itemClick = function(value) { 
     console.dir(value); 
    }; 

    $scope.submitForm = function() { 
     UserService.getSearchResult($scope.formSearchData).then(function(data) { 
      console.log(data); 
      if(data){ 
      $scope.items = data; 
      } else { 
      $scope.data = $scope.saved; 
      } 

     }); 
    }; 



}]); 

app.factory('UserService', function($http, $q) { 
    return { 
     getAll: function() { 
      return $q(function(resolve, reject) { 
      resolve(
       [{ 
       name: 'test' 
       }, { 
       name: 'test2' 
       }] 
      ); 
      }); 
      /*return $http.get('http://localhost:3030/user/all').then(function(response) { 
       return response.data; 
      });*/ 
     }, 

     getSearchResult: function(query) { 
      return $q(function(resolve, reject) { 
      resolve([{ 
       name: 'test' 
      }]); 
      }); 
      /* return $http.post('http://localhost:3030/user/search', query, { 'Content-Type': 'application/json' }).then(function(response) { 
       return response.data; 
      });*/ 
     } 
    }; 
});