[英]AngularJS - $scope data change doesn't affect view
如果我根據自己的功能重新加載數據,則視圖不會改變。 我發現,應該通過添加$scope.$apply()
。 更新范圍后的某個地方,但是在這種情況下,我收到此錯誤。
https://docs.angularjs.org/error/ $ rootScope / inprog?p0 = $ apply
我的劇本:
var roomsApp = angular.module('roomsApp', []);
roomsApp.controller('RoomListController', function RoomListController($scope, $http) {
$scope.refreshData = function () {
$http({
method: 'GET',
url: '<?=url('getRooms')?>'
}).then(function successCallback(response) {
$scope.rooms = response.data;
console.log(response);
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
}
$scope.refreshData();
$scope.addRoom = function (title) {
if (title != "" && typeof title !== 'undefined') {
$http({
method: 'POST',
url: '<?=url('addRoom')?>',
data: {
title: title
}
}).then(function successCallback(response) {
$scope.refreshData();
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
}
$scope.$apply();
};
});
我的角度-HTML:
<div class="row" ng-app="roomsApp">
<div class="col-md-8">
<div class="panel panel-default" ng-controller="RoomListController">
<div class="panel-heading">Rooms</div>
<div class="panel-body">
<ul class='list-group' ng-repeat="room in rooms">
<li class="list-group-item">{{room.title}}</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default" ng-controller="RoomListController">
<div class="panel-heading">New room</div>
<div class="panel-body">
<div class="input-group input-group-lg">
<span class="input-group-addon" id="title">Title</span>
<input type="text" ng-model="title" class="form-control" placeholder="" aria-describedby="title">
</div>
<br>
<button ng-click="addRoom(title);" type="button" class="btn btn-primary pull-right"><span
class="glyphicon glyphicon-plus"></span></button>
</div>
</div>
</div>
</div>
試試這個:
$scope.$apply(function(){
$scope.rooms = response.data;
});
$scope.$apply();
ng-controller="RoomListController"
屬性 ng-controller="RoomListController"
放在<div class="row" ng-app="roomsApp">
原因:現在,您當前的代碼創建了兩個單獨的RoomListControllers范圍。 問題是,您希望在第二個控制器范圍內執行addRoom方法的同時更新第一個控制器范圍內的列表。 這兩個控制器無法相互通信。
ps如果您需要兩個不同的控制器作用域,請考慮使用rootScope.broadcast-rootScope.on模式來促進兩個同級作用域之間的通信
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.