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