AngularJS - $範圍數據更改不會影響視圖

Question

如果根據我的功能重新加載數據，則視圖不會更改。我發現，應該通過加入$scope.$apply()來解決。更新範圍後的某處，但在這種情況下，我收到此錯誤。

https://docs.angularjs.org/error/ $ rootScope/inprog P0 = $申請

我的腳本：

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> 

Answer 1

1. 刪除$scope.$apply();
2. 從你的HTML，刪除這兩個ng-controller="RoomListController"上<div class="row" ng-app="roomsApp">

原因屬性

ng-controller="RoomListController"： 眼下，當前的代碼創建RoomListControllers兩個獨立的範圍。問題是，您期望更新第一個控制器作用域上的列表，同時在第二個控制器作用域上執行addRoom方法。兩個控制器不能相互通信。

p.s.如果您需要有兩個差異控制器作用域，請考慮使用rootScope.broadcast - rootScope.on模式來促進兩個兄弟作用域之間的通信

Answer 2

試試這個：

$scope.$apply(function(){ 
    $scope.rooms = response.data; 
});