angularJS $scope not being applied

Question

Im pretty new to angularJS so please forgive me if I say anything completely wrong. I making some sort of a chat. I have a problem with the scope/view not beign updated after getting the data. I have a variable $scope.users which is an array containing infos about users and the view does an ng-repeat on the users to display their infos. The data is stored from a previous page and loaded through session storage. The controller looks like:

app.controller('table-controller',['$scope','$interval','HttpService','TableModel',
function($scope,$interval,HttpService,TableModel){
    var _this = this;
    console.log('loading table controller ...');


    $scope.users = [];
    var sessionData = JSON.parse(sessionStorage.getItem('sessionData'));
    var activeUsers = sessionData.activeUsers;

    //$scope.users = TableModel.initUsers();

    $scope.$watch('users',function(){
        for(var i = 0; i < 10; i++){
            $scope.users.push({
                user : ' ',
                name : 'Vacant',
                picture : '../img/sit_default.png',
                speak_turn : ' ',
                sit : i,
                last_request : 0
            });
        }
        for(var i = 0; i < activeUsers.length; i++){
            var sit  = activeUsers[i].sit;
            $scope.users[sit] = activeUsers[i];
        }   
    });
$scope.className = function(index){
        return "sit" + (index + 1);
    }

And the html is :

 <ul class="first-place">
        <li ng-repeat="user in users track by $index" ng-class="className($index)">
          <div class="pro_pic_wrap">
            <img ng-src="{{user.picture}}" alt="">
            <span>{{$index + 1}}</span>
          </div>
          <a href="#">{{user.name}}</a>
        </li>  
 </ul>

Everything works fine if I use $watch to create $scope.users. Otherwise when the page loads the view sees an empty $scope.users so ng-repeat does nothing. If i reload the page everything works fine. I tried $scope.$apply() but gives me an error saying digest is already being called. I dont understand why I need to use $watch here. Thanks in advance for your help!

why you use var users = sessionData.users; should it be the $scope.users? — Pankaj Parkar
– Pankaj Parkar, Commented Feb 12, 2015 at 20:36
ya the vanilla JS object "var users" is not the way to go. Keep it in scope like pankaj says. you shouldn't have to use watch after that. — vidalsasoon
– vidalsasoon, Commented Feb 12, 2015 at 20:42
i should probably rename my variables. Basically each page can have up to 10 active users. the var users contains the active ones which i push in $scope.users along with the vacant spaces — alex436
– alex436, Commented Feb 12, 2015 at 20:44

MAbdulHalim · Accepted Answer · 2015-02-12 21:07:10Z

0

you can create a method and call it instead of using $watch

$scope.getUsers= function(){
    for(var i = 0; i < 10; i++){
            $scope.users.push({
                user : ' ',
                name : 'Vacant',
                picture : '../img/sit_default.png',
                speak_turn : ' ',
                sit : i,
                last_request : 0
            });
        }

        for(var x = 0; x < users.length; x++){
            var sit  = activeUsers[x].sit;
            $scope.users[sit] = activeUsers[x];
        }   
}
$scope.getUsers();

answered Feb 12, 2015 at 21:07

MAbdulHalim

4095 silver badges14 bronze badges

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

5 Comments

MAbdulHalim Over a year ago

make sure that u already consumed "$sessionStorage" service in your controller

alex436 Over a year ago

I am not sure I understand. sessionStorage is a javascript object to let you store/retreive session related data w3schools.com/html/html5_webstorage.asp

MAbdulHalim Over a year ago

sorry i thought u r using Angularjs ngStorage ngmodules.org/modules/ngStorage

MAbdulHalim Over a year ago

so if u replace var sessionData var activeUsers with $scope.sessionData $scope.activeUsers , does it make any sense?

alex436 Over a year ago

it doesnt work either. I am not really looking for a way to get rid of watch as much as understanding why in this case the $scope.users will not update in the view if I dont use $watch. thanks for your help thought

Collectives™ on Stack Overflow

angularJS $scope not being applied

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related