Ionic and Angularjs - Update/Refresh View from Controller

Question

The usual start to these, I am new to both Ionic and Angularjs. I am developing an Ionic app which at it's heart is very simple. We show a list of classes(sessions), the person clicks on an icon to book the class then the icon changes to allow them to cancel the class. We also update the card to show the number of places remaining in each session on the day. I have the code working to add and remove a person to and from a class but I am not sure how to update the template view from within the controller. The controller code is pretty simple

  // Check Person in to session.
  $scope.addCheckIn = function(schedule){
      var promise = sessionDataService.checkinSession(schedule.sessionID);
      promise.then(function(data){
          // Update (refresh) Schedule Details 
          // NOT SURE WHAT TO PUT HERE??
      });
  };

I have tried a number of different approaches including

Refreshing the $state and calling doRefresh and even calling the original controller methods to populate the cards again but the view won't update unless I physically click between states on the screen

    //$state.go('app.schedules', {}, {reload: true});
    //$scope.doRefresh();
    //getScheduleData(formatDate(selectedDate), formatDate(selectedDate), 'true');

I have also looked at $scope.apply and $scope.timeout but I am not sure if this is taking me further from the real solution

What is the correct way to update the view after an update? Should it be after the promise.then in the controller or should I call a service and update everything.

Any tips on what is the best way to do this and a point in the right would be really appreciated.

Thanks everyone.

Brian Quirion · Accepted Answer · 2016-02-05 01:22:47Z

1

In your promise, you should add the data to the scope.

$scope.scheduledetails = data;

Then in your template, you will be able to access the object scheduledetails from the controller with AngularJS brackets to bind the data to the HTML.

<h1>{{scheduledetails.title}}</h1>
<p>Details : {{scheduledetails.details}}</p>

AngularJS should take care of refreshing what is needed without having to call any method or anything.

Full example

Controller

$scope.addCheckIn = function(schedule){
      var promise = sessionDataService.checkinSession(schedule.sessionID);
      promise.then(function(data){
          $scope.scheduledetails = data;
      });
  };

Template

<h1>{{scheduledetails.title}}</h1>
<p>Details : {{scheduledetails.details}}</p>

answered Feb 5, 2016 at 1:22

Brian Quirion

405 bronze badges

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

1 Comment

Skittles Over a year ago

Thanks Brian, I'll try now and let you know.

Collectives™ on Stack Overflow

Ionic and Angularjs - Update/Refresh View from Controller

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related