雙向綁定似乎不起作用。列表不會自動更新

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; 
      });*/ 
     } 
    }; 
});