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

试试这个：

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

Answer 2

删除var savedFilesDictionary = [[String: AnyObject]]() var newEntryDictionary = [String: AnyObject]() var receivedAudio = NSURL(string: "/something/some") if let audio = receivedAudio?.filePathURL { newEntryDictionary["url"] = audio } newEntryDictionary["name"] = "some caption" savedFilesDictionary.append(newEntryDictionary)
从您的HTML中删除$scope.$apply();个属性
ng-controller="RoomListController" ng-controller="RoomListController"

原因：现在，您当前的代码创建了两个独立的RoomListControllers范围。问题是，您希望在第二个控制器作用域上执行addRoom方法时更新第一个控制器作用域上的列表。两个控制器无法相互通信。

P.S。如果您需要有两个不同的控制器范围，请考虑使用rootScope.broadcast - rootScope.on模式来促进两个兄弟范围之间的通信

AngularJS - $ scope数据更改不会影响视图

2 个答案: