Please help test: Angular 1.3, improved transitions, cached views, etc

ionic-v1
210

@oori Sorry, but same exact message I said before. Please provide a codepen so I can debug what you’re seeing.

211

UPDATE : Perhaps this update() method is not really needed anymore? In the past, you had to call it if you were injecting slides or re-enabling slides that had ng-if applied. I’m finding now that when I toggle the condition that ng-if is watching, the slidebox correctly displays it without the update() being necesary.

Unfortunately, it seems the .update() method is still gone.

@adam Is the .update() method ever coming back to $ionicSlideBoxDelegate?

212

@Calendee Yes, ionicSlideBoxDelegate.update() is no longer needed. However, the deprecated warnings needed to be hooked up to the delegate system, and my post above needs to be updated with the slidebox breaking changes updates: http://code.ionicframework.com/nightly/CHANGELOG.html

213

@Calendee Yes, there was an issue with a view-title attribute when set to an empty string. Thanks for putting together the codepen and describing the issue, it should be fixed in build 781.

As for using $ionicNavBarDelegate.title() however, I’d recommend to set a scope variable and place that in the view-title attribute, like you did in check-in.html template in that same codepen. Reason for this is because it’s a timing issue of when the controller fires off $ionicNavBarDelegate.title(), and when the transition is entering and leaving, and knowing which header bar is, or is going to be, the active header bar.

So what’s happening is it’s setting the active header bar’s title, but then that active header bar is on the way out to be replaced soon with the next header of the upcoming view. You can still use $ionicNavBarDelegate.title() to update titles, but I wouldn’t recommend it to use before the view comes in to be the active view.

So for setting a title before a transition, I’d say it’s best just to use a scope variable in the view-title, and that way the view’s title is known at all times during the transition. I put together a codepen showing how I’d recommend to do this. Thanks

214

@adam - Thanks. 781 fixes it. However, I’m finding that you MUST delay the change to the scope property by at least 550ms. Otherwise, the title will never change.

I’m assuming that has something to do with the time title transition takes.

UPDATE: Actually, it seems that 750ms is the best. I was finding many instances in my own app where the title would update only sporadically. So, delaying it to 750ms seems to solve it for me. It’s a bit of an odd UX, but it works.

215

@ronaldjeremy Disconnecting the scope will still allow the controller to stay in memory and do whatever it needs to do, however, any changes to it’s scope won’t be reflected in the DOM while it’s disconnected. If the view’s controller shouldn’t be allowed to keep thinking in the background, then it shouldn’t be allowed to cache.

In you’re case I think you should be good, because those websocket messages would still be received by the controller and it would update its scope, but the updates wouldn’t be reflected in the DOM while it’s disconnected.

However, when you go back to the cached view then its scope would be reconnected, which it would then see that there are changes, and would then update the DOM with the new messages. Is this going to work in your scenario? Thanks.

216

@adam
Just noticed that some animation go removed like slide-in*
could you also change documentation of which were removed?
as far as i see only slide-in-up still exists.

1 Like
217

I am testing my app with build 782. I see in the docs that $ionicSlideBoxDelegate
.slide() is replaced by .select(), and I have updated accordingly.
It seems however that calls to .select() are ignored (as in they have no effect).

If I single-step the call in the debugger into the Ionic code, I get to the

delegate[mehodname] function() ...

where the

instances.forEach(function(...))

fails to find any matching instances, and the call fails…

218

I have a similar case:

Let’s assume:

  • page A leading (listing items) to page B (detail item).
  • A is set as a cached views (by default).
  • A’s controller and B’s controller share a same angular-cache instance.

In B, I update the angular-cache, through some actions, like bidding the item.
“A” list is well updated although cached.

My question is: Why isn’t some console.log or alerts in A’s controller displayed when back to it from B?
How works under the hood the A’s update when back to it from B?

Thanks.

219

@Mik378 I’m not sure I’m following what you mean. Can you create a codepen showing what doesn’t work to go along with your description? Thanks

220

@JesperWe Can you create a codepen showing the issue you’re having? If you need to change the selected index at the time the controller loads I’d recommend using a scope variable and selected attribute instead, like this example: http://plnkr.co/edit/7p0UgIdKNyK9Cb99DyQc?p=preview

If you need to use $ionicSlideBoxDelegate at the time the controller loads, then you could also try wrapping the call in a timeout to allow the instance to get registered, like this:

  $timeout(function(){
    $ionicSlideBoxDelegate.select(2);
  })
221

@Calendee You’re setting the view’s title through the view-title attribute, like this codepen, but still having an issue? Is it a problem on all browsers, or just certain ones or certain platforms? Can you create a codepen on how it’s not working?

222

@Auro slide-in-up is still used by the modal, but nothing else was which is why they were all removed. Right now we’re transitioning to a more powerful animation system, so expect a lot more options in the coming months.

223

@adam : Below is the sample that I forked from your fork of my sample. On the AnotherTitleCtrl, I’m setting the title after 150ms delay. It does not update the title in the Navbar.

Modify it to change the title after 550ms. Now, the title updates properly. I tried all kinds of things, but 550ms delay is the fastest you can do a title update and have it actually reflect in the view.

Sample : http://codepen.io/calendee/pen/myyZGp?

1 Like
224

@Mik378 : You asked why some console statements did not show up. I’m assuming that in your controller for A, you have some logging like console.log('Controller A loaded!'). Then, you navigate to B and back to A. You are expecting the logging statements from Controller A to fire again, right?

If so, they will never do this. The controller never left memory; so, it does not reload again. This is VERY different than the way Ionic used to work. In the past, when you navigate from a view, that controller is destroyed. With Caching, the controller is disconnected and then reconnected when the view comes back.

So, if you need to do stuff when the controller is reconnected, you need to do use the new $ionicView.x events.

Example:

angular.modue('myApp').controller('ControllerA', function($scope) {

        $scope.$on('$ionicView.enter', function() {
           console.log('Controller A loaded!');
           // do stuff here like update your model
        });

});

There are other $ionicView events documented here : http://ionicframework.com/docs/nightly/api/directive/ionView/

2 Likes
225

Adam,

Did you get a chance to look at : Please help test: Angular 1.3, improved transitions, cached views, etc

With all the new $ionicView.X events, we really don’t need these ui-router state events. However, it might be a good idea to document this in the ionicView documents. People are really used to these events.

1 Like
226

Great :slight_smile: Thanks

Just another question:

I want to refresh the cached view when I load it through a tab-item?
Is there a way to do it? Indeed, I want for example to force refresh of the whole A’s list, when clicking on my tab “View A” .
But I still need to cache it when back from B.

227

$ionicSlideBoxDelegate.{next(),previous()} don’t work. Tried with $getByHandle too, nothing changes.

$ionicSlideBoxDelegate.{next(),previous()} now return the next/previous index. Use $ionicSlideBoxDelegate.select($ionicSlideBoxDelegate.previous()). http://code.ionicframework.com/nightly/CHANGELOG.jtml

I brought my slideBox to be almost identical to the one at codepen¹, and it still doesn’t work (doesn’t slide with touch events, and nor does it work through the delegate). I was able to make it ‘work’ once using a ion-content with scroll=“true” but performance was bad for some reason and it messes up some of my styling. [1] {simple ion-view inside a global ion-nav-view}, {no ion-content nor ion-scroll}, {no custom CSS that affects positioning or behaviour, only presentation}.

Could you post a codepen of what you’re doing?

Your slidebox now needs a parent that defines width/height explicitly (ion-content works perfectly for this). I’m still looking at ways to solve this.

228

Tabs have an on-select event. So, you can use that to force a reload.

Docs : http://ionicframework.com/docs/nightly/api/directive/ionTab/

229

@adam I’m not sure that I could replicate it with a codepen. There is a thread on it, on here. I can diagram what is happening though.

----------------------------1
---------------2-----------3-----------4
-----------5–6--7-----8–9

Those are the stacks I’m using to navigate. 1 is an abstract parent, as are 2 and 3. States 4 -9 actually show the content. If I am in states 5 or 6 and attempt to go to state 4 I can see the code going to state 4, then it calls state 7, and finally makes a call to whatever state I am attempting to navigate away from. The same thing happens if I am in state 8 going to state 4. It calls 4, then 9, then back to 8. Interestingly if I am in 7 or 9 the state changes to 4 with no issue. I wll update this post with the link to the other thread momentarily. Here is the link: Linking to states in tabs