Resetting Controllers


#1

When routing to a view then back to the previous view (main), then go back to that same view, it would appear as if the controller is getting lost and/or that the html isn’t being processed the second time. Stuff is missing on the second view which is all related to angular processing as shown in the code below “This line is NOT PROCESSED”.

<nav-page id="sessions-page" >

    <header class="bar bar-header bar-positive" back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c">
        <h1 id="title" class="title">Sessions</h1>
    </header>

    <content class="has-header">
        <div class="list" option-buttons="getItemButtons()">
            <div ng-repeat="session in sessions" item="session" ng-href="#/sessions/{{session.id}}" class="item">

                <div  style="background-color: {{ session.themecolor }}; border-radius: 6px; margin:0 auto; width: 100%;">

<!--This line is NOT PROCESSED  -->                  <div ng-show="{{ isDivider(session) }}" style=" margin-left: -15px; border-radius: 4px; "> {{ getDividerName(session) }} </div>

                    <!--This line is NOT PROCESSED  -->                        <p style="padding-top: 4px;">{{ getTitleName(session) }}</p>
                        <h4>{{ session.speakername }}</h4>
                        <h4>{{ session.description }}</h4>
                        <h4>{{ session.location }}</h4>

                    
<!--This line is NOT PROCESSED  -->                    <div ng-hide="{{ isBreak(session) }}" style="background-color: transparent; border: none; vertical-align: middle">
                        <div style="background-color: transparent; border: none; text-align: right; padding-bottom: 0px;">
                            <toggle ng-model="session.attendees[suser.id]" name="attending" style="background-color: transparent; border: none; padding-top: 0px; margin-left: 0px; padding-left: 0px" >
                            </toggle>
                            <p style="font-size: 14; text-align: right">Attending?</p>
                        </div>

                    </div>

                </div>
            </a>
          </div>
    </content>

</nav-page>

#2

Your code has an ng-show to hide or show that section of content. When Angular loads a new route, the OLD controller state is lost and the NEW controller is initialized. So, if isDivider is based on something in the controller, it will not be the same the next time the controller is loaded.

Is that the problem? If you need to maintain that state or isDivider, you’ll need to use a service.


#3

+20 for @Calendee!

You’re hint lead me to the solution.

Here’s the top of the code for the Controller…

.controller('SessionCtrl', ['$scope', '$routeParams', '$timeout', 'loginService', 'eventService', 'sessionService', '$location', '$filter',
                        function($scope,   $routeParams,   $timeout,   loginService,   eventService,   sessionService,   $location,   $filter){


if(sessionService.sessions() != null){
        $scope.sessions =  sessionService.sessions();
        return;
    }
        
    sessionService.getSessions($routeParams.sessionId);

I hear the javascript experts chanting “it’s quite obvious…”

As a fledgling javascript developer, I’m just learned that you cannot ‘return;’ from a function as that doesn’t allow the rest of the code to be processed. In this case, the isDivider method located further on down the function.

The logic for this was that if the data has already been fetched, don’t refetch it. I’ve updated the code…

   if(sessionService.sessions() != null){
            $scope.sessions =  sessionService.sessions();
        }else{
        sessionService.getSessions($routeParams.sessionId);
        }

The reason it worked the first time is that the sessions was null so the rest of the code was processed.

As a bonus question: What is this called in javascript? (i.e. where the entire function has to be scanned to be processed)