AngularJS - $scope data change doesn't affect view

Question

If I reload the data according to my function, the view does't change. I found, that should be solved by adding $scope.$apply(). Somewhere after updating the scope, but in this case i am getting this error.

https://docs.angularjs.org/error/$rootScope/inprog?p0=$apply

My script:

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

});

My angular - 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(); should be in your callback...if its needed. You probably are still fetching data as the digest phase is in process. — terpinmd
– terpinmd, Commented Jun 8, 2016 at 12:53
The post method works properly, if i console.log it, it returns the new data. — Jan Cizmar
– Jan Cizmar, Commented Jun 8, 2016 at 13:21

Anton Kirzyk · Accepted Answer · 2016-06-08 12:55:41Z

1

Try this one:

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

answered Jun 8, 2016 at 12:55

Anton Kirzyk

1403 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Krzysztof Atłasik Over a year ago

This code should be also called inside of then function, because promises are asynchronous. If you put is just at the end of addRoom then $scope.$apply() will be called before request finishes.

yclee0210 · Accepted Answer · 2016-06-08 13:25:54Z

0

Remove $scope.$apply();
From your HTML, remove both ng-controller="RoomListController" attributes
ng-controller="RoomListController" on <div class="row" ng-app="roomsApp">

Reason: Right now, your current code creates two separate scopes of RoomListControllers. Problem is, you are expecting to update the list on the first controller scope whilst executing the addRoom method on the second controller scope. The two controllers can't communicate with each other.

p.s. if you need to have two difference controller scopes, consider using rootScope.broadcast - rootScope.on pattern to faciliate communication between the two sibling scopes

answered Jun 8, 2016 at 13:25

yclee0210

1314 bronze badges

1 Comment

Jan Cizmar Over a year ago

Thanks a lot. I copied the bootstrap panel and forgot to remove the ng-conroller tag. So the solution has nothing to do with $scope.$apply(); It runs without that.

Collectives™ on Stack Overflow

AngularJS - $scope data change doesn't affect view

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related