Updating controller data doesnt update the view - Angular JS - Ionic

Question

I have this controller :

.controller("mainctrl",function($scope,$state){
        var self = this;

        var usuario = window.localStorage.getItem('usuario');
        this.msjs=[];

        var res = window.localStorage.getItem(usuario+'_msjs');
        if(res===null)
        {
            this.msjs=[];
        }
        else{
            this.msjs=JSON.parse(res);
        }

        $scope.$on('newMessageReceived', function(e, msg) {
            //alert('message received:'+msg);
            self.msjs.push(msg);
            alert('mensaje recibido');
            alert(JSON.stringify(self.msjs));

            window.localStorage.setItem(usuario+'_msjs',JSON.stringify(self.msjs));
            $state.reload();

        });
  }

And the view:

<ion-view ng-controller="mainctrl as m" >
             <ion-nav-buttons side="right">
                 <button class="button" ng-click="m.logout()">Logout</button>
             </ion-nav-buttons>
             <ion-content id="msjcontent">
                 <h1 class="button-positive" id="log">Mensajes</h1>
                 <div class='card' ng-repeat="msj in m.msjs track by $id($index)">
                     {{msj}}
                 </div>

             </ion-content>
</ion-view>

When the $scope receives the event it pushes a new element in the 'msjs' array. The view doesnt update the data. I had to put $state.reload() to refresh the $state (ui-router from Angular-Ionic) and watch the changes. This refresh is giving me problems such as multiple copies of $scopes (1 for each $state.reload() ). i've already tried with $scope.apply() and it didnt work. I think the problem may be Ionic/angular ui-router stuff.

I want to know a better way to bind the msjs array to the view without refresh the $state.

Thanks.

why you don't set controller in state level defination like .state(url: '/home', controller: mainctrl , controllerAs: m, templateUrl: 'home.html', cache: false) with cache set to false & remove it from ng-controller="mainctrl as m" view level — Pankaj Parkar
– Pankaj Parkar, Commented May 14, 2015 at 10:11
The view only update if i go back and forward with the navigation buttons. — Sergio Lenoir
– Sergio Lenoir, Commented May 14, 2015 at 11:17
I thhink just by changing your object structure from this.msjs=[]; to this.data={};this.data.msjs=[]; will fix your problem..& use this.data.msjs where ever you used.. — Pankaj Parkar
– Pankaj Parkar, Commented May 14, 2015 at 11:30
I did , problem persists :-( Thx for your help pankajparkar. — Sergio Lenoir
– Sergio Lenoir, Commented May 14, 2015 at 11:47

Sergio Lenoir · Accepted Answer · 2015-05-14 15:35:09Z

1

I was writing $scope.apply() and the correct method is $scope.$apply().

answered May 14, 2015 at 15:35

Sergio Lenoir

531 silver badge6 bronze badges

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

Comments

Mohammed BOUTCHEKKOUCHT · Accepted Answer · 2017-03-30 12:47:42Z

0

.state(url: '/url', controller: Ctl, templateUrl: 'template.html', cache: false)
cache: false ==> solved my problem ^^

edited Mar 30, 2017 at 12:47

answered Mar 30, 2017 at 9:40

Mohammed BOUTCHEKKOUCHT

494 bronze badges

Collectives™ on Stack Overflow

Updating controller data doesnt update the view - Angular JS - Ionic

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related