[英]two way binding doesn't seem to work. List is not automatically updating
我在更新列表時遇到麻煩。 首先,我通過從$ 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超出范圍的內容,並嘗試通過使用$ scope.apply()或$ scope。$ digest來解決,但嘗試此操作時出現錯誤。 我也嘗試在html中添加跟蹤,但這似乎也不起作用。
如您所見,我還嘗試對列表進行硬編碼,這似乎也不起作用。
我是Angular的新手,現在讓我忙了好幾天。 我希望有一個人可以幫助我。 也歡迎對我的代碼提出任何建議;)。 謝謝!
這是僅使用一個控制器即可完成的代碼編寫工作。 由於沒有您的API端點,我對其做了一些修改,但是返回的對象是一個Promise,因此可以正確顯示數據。
http://plnkr.co/edit/iEWBm6QE2pmFqbsU6EiB?p=preview
您的代碼無法按預期工作的原因是因為您在HTML中兩次聲明了控制器。
從角度文檔:
“當通過ng-controller指令將Controller附加到DOM時,Angular將使用指定的Controller的構造函數實例化一個新的Controller對象。將創建一個新的子作用域並將其作為可注入的參數提供給Controller的構造函數作為$ scope。”
含義:
當您聲明另一個ng-controller時,它具有自己的子作用域,它不與任何其他控制器共享作用域。 並且您的項目僅在一個范圍內聲明。
相關代碼:
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;
});*/
}
};
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.