bug: beta6 to rc2 - scope problem

[tigrus]

Type: bug

Platform: all

I have code like this:

  <ion-side-menus>
    <ion-side-menu-content>
        <ion-nav-bar class="bar-dark bar-header">
          <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
            </button>
          </ion-nav-buttons>
          <ion-nav-buttons side="right" class="no-top" ng-if="user">
            <button class="icon-right ion-plus button">
              {{user.balance | currency }} &nbsp;&nbsp;
            </button>
          </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view animation="slide-left-right" name="menu-content"></ion-nav-view>

    </ion-side-menu-content>
    <ion-side-menu side="left">
          <ion-header-bar class="bar-positive" href="#/fantasy/home">
          </ion-header-bar>
          <ion-content class="has-header">
              <ion-list>
                <ion-item nav-clear menu-close href="#/home">
                  Home
                </ion-item>
                <ion-item nav-clear menu-close href="#/login" ng-if="!user">
                  Login
                </ion-item>
                <ion-item nav-clear menu-close href="#/games/all">
                  View All Games
                </ion-item>
                <ion-item nav-clear menu-close href="#/games/my">
                  My Games
                </ion-item>
                <ion-item nav-clear menu-close href="#/logout" ng-if="user">
                  Logout
                </ion-item>
              </ion-list>
            </ion-content>
    </ion-side-menu>
  </ion-side-menus>

Line:
<ion-nav-buttons side="right" class="no-top" ng-if="user">
not works.

Line:
<ion-item nav-clear menu-close href="#/logout" ng-if="user">
works.

In beta6 both line works. In rc2 - first line not working.

{{user.balance}} - works when removing if statement.

Where to dig?

[tigrus]

Looks like trouble in rc2 with this line:

<ion-nav-buttons side="right" class="no-top" ng-if="user">

It's now showing block in both cases - user and !user.

[zane-insta]

I am having the same problem.

[Fayozjon]

I think you have to use ng-if=="user"

[piernik]

Me too - looks like ion-nav-buttons copies $scope and not updates it

[piernik]

Here is my bug: http://codepen.io/piernik/pen/NPQqgG
Click Go to list then first - title is default Item. Then click second title changes to Long first title

There is a bug I think

[perrygovier]

Directives copy their parent's scope in the OOP fashion where once they're instantiated they don't automatically update. Does using $parent.user help?

[tigrus]

@perrygovier no. Only remove of ng-if helps. ng-if="true" also not working.

[piernik]

@perrygovier have You looked at my codepen? There is bug for sure. Looks like navbar is refreshing scope too early - when final scope isn't set yet.
I think @tigrus has the same problem.

[Yuripetusko]

@piernik I don't think there's a bug in ionic,It all works for me here: http://codepen.io/Yuripetusko/pen/MYNVxz

[piernik]

@Yuripetusko even in Your codepen it's not working well.
Click Go to list then first - title is ok
then second title is ok
then first again - title is wrong
navigate a little - title is not always changing as it should

[Yuripetusko]

@piernik Yes you are right! I can see it now. I updated code a little bit so it's cleaner for ionic developers to see the issue. http://codepen.io/Yuripetusko/pen/MYNVxz

Basically if you go to list, then click first item, then click second item, and then click first one again the title doesn't update even though scope value is definitely updated

[adamdbradley]

@tigrus As for the showing and hiding a button in the nav-bar, can you fork this codepen and replicate the issue: http://codepen.io/adamdbradley/pen/azereK?editors=101

[piernik]

@adamdbradley have You looked at mine and @Yuripetusko's examples? (http://codepen.io/piernik/pen/NPQqgG and http://codepen.io/Yuripetusko/pen/MYNVxz)
You have there bug on a plate.
I think problem is with navbar when changing to the same state but with different params.

[mhartington]

@piernik looking at your codepen, it should't even work.
At first glance, there shouldn't be a nested ion-nav-view in list.html. This could be the main cause of confusion with in the apps history logic. There could be a much simpler way of doing what you are trying to do.

[piernik]

@mhartington nested view are common thing in ui-router.
This is only an exmaple to isolate bug.
In real app I want to use nested view because of different data handling - data which is downloaded by app.item's resolve and then in different views use this data (ex. app.item.details, app.item.gallery, app.item.map). That way I don't have to resolve data for every view - data is simply the same so what for - I also don't have to work on difficult data cache.
Off course I would be able to do it differently (without nested view) but:

1. I didn't see in Your docs that I shouldn't use nested view
2. Only navbar is problem - everything works fine
3. As I said in ui-router nested view are common thing.

Please answer my question - should I rewrite my app or can You fix the problem?

Edit: I can modify parent's navbar in child controller so in nested view I get gid of navbar. Hope it works.

[mhartington]

Right, nesting views is common with ui-router, but for a mobile app paradigm it's not really advised unless you're making an abstract state. ion-nav-view is a container of many views that slide in and out, and take over the entire screen.

You should probably rewrite the structure and not use a nested ion-nav-view

[piernik]

I see that in router I can't use controller with abstract state. why? I thinks it's possible in ui-router
Here is my code

.state('app.item', {
    url: "/item/:id",
    abstract: true,
    views: {
        'page@app': {
            controller: "itemCtrl as vm"
        }
    },
    resolve: {
        itemData: ['psDane', '$stateParams', function (psDane, $stateParams) {
            return psDane.pobierzDaneAtrakcji($stateParams);
        }]
    }
})
.state('app.item.info', {
    url: "/info",
    views: {
        'page@app': {
            templateUrl: "app/atrakcja/atrakcja-info.html"
        }
    }
})
.state('app.item.map', {
    url: "/map",
    views: {
        'page@app': {
            templateUrl: "app/atrakcja/atrakcja-mapa.html",
            controller: "atrakcjaMapaCtrl as vm"
        }
    }
})

app.item state should be only for common controller for both child states but it is never triggered when going to app.item.info
Controller without view is not working either:

.state('app.item', {
    url: "/item/:id",
    abstract: true,
        controller: "itemCtrl as vm",
    resolve: {
        itemData: ['psDane', '$stateParams', function (psDane, $stateParams) {
            return psDane.pobierzDaneAtrakcji($stateParams);
        }]
    }
})

[mhartington]

You can use controllers on abstract states. @piernik please post about this in the forum, it's not really relevant to the issue.

[tigrus]

Played with codepen.

Working:
http://codepen.io/anon/pen/zGxYGz

Not working:
http://codepen.io/anon/pen/NqPWNP

If we move ng-if to ion-nav-buttons - it's ignored. If it is inside ion-nav-buttons - it works.

I think, ionic must throw warning about ion-nav-buttons directive.