ion-nav-bar not working properly when using components

[DAB0mB]

Hi all!

I've been trying to implement a component-based app using angular@1.5.x, but unfortunately I've encountered some problems with the navigation bar provided by ionic.

I would expect the bar to display a title and some buttons, but nothing is shown, and on top of that, the contents of the page is positioned behind the empty bar shown on the screen.

I used the components as the templates show by the $stateProvider, but when using these templates directly without going through any components, it works.

I'm currently writing an example app and I'd like to use a components architecture since it's best practice. Any help would be appreciated.

This is the component version of the app I'm writing, which is not working:

https://github.com/DAB0mB/angular-meteor-whatsapp/tree/issue/components

And this is the working version, where I use the templates directly:

https://github.com/DAB0mB/angular-meteor-whatsapp/tree/feat/angular-ecmascript

Inside the client/scripts folder you can find the routes.js and components.js file.

[Klaster1]

Same here, really annoying issue. I've digged into it, seems that the issue happens only with components and directives that have isolated scope. Due to that, $ionicView controller doesn't receive $ionicView.afterEnter event, so callback responsible for title update doesn't run.

[fromthemills]

I have the same problem. Here is an example of my home view and the route ( notice that the router does not support the new ui-router component syntax jet but this is another issue)

// home.component.js
import controller from './home-view.controller'
const HomeView = {
    controller,
    template: `
        <ion-view>
            <ion-nav-title>Home</ion-nav-title>   
            <ion-content class="has-header">...</ion-content>
        </ion-view>`
};
export default HomeView;
// home.js
.state('home', {
    url: '/home',
    parent: 'authorized',
    views: {
        '@authorized': { template: '<home-view>' }
    }
});

If the ion-view directive is not the top level component injected into the ion-nav-view the ion-nav-bar does not work properly.

A possible work around might be to define the ion-view inside the route template but i do not like this approach at all. (It is also not compatible with new ui-router component syntax).

// home.component.js
import controller from './home-view.controller'
const HomeView = {
    controller,
    template: `<ion-content class="has-header">...</ion-content>`
};
export default HomeView;
// home.js
.state('home', {
    url: '/home',
    parent: 'authorized',
    views: {
        '@authorized': { template: `
            <ion-view>
                <ion-nav-title>Home</ion-nav-title>   
                <home-view>
            </ion-view> `
        }
    }
});

[rinogo]

Is this related? http://stackoverflow.com/questions/39516278/ionic-understanding-ion-nav-buttons-and-isolated-scope

[rinogo]

Upon closer reading, I don't think it is related. But I the approach applied in the CodePen ( restrict: "A" directive applied to an <ion-view/> element) might help others that visit this issue, so I'll leave these comments here.

[ivanovvitaly]

Have the same issue with angular 1.5.8
Cordova CLI: 6.3.1
Gulp version: CLI version 3.9.1
Gulp local:
Ionic Framework Version: 1.3.1
Ionic CLI Version: 1.7.16
Ionic App Lib Version: 0.7.3
OS: Windows 8.1
Node Version: v5.6.0

When I use templateUrl + controller in view declaration my navigation bar works fine

$stateProvider
            .state("home.features", {
                url: "/features",
                views: {
                    "main@home": {
                        templateUrl: "app/home/features/features.tmpl.html",
                        controller: "FeaturesController as $ctrl"
                    }
                }
            });

but when I specify view as component navigation bar disappears

$stateProvider
            .state("home.features", {
                url: "/features",
                views: {
                    "main@home": {
                        template: "<features-page></features-page>"
                    }
                }
            });

Please advice

[gatolgaj]

Not sure if it is a problem.. Components are supposed to work drop in at
any place hence scoped.

Please try to add top-nav-bar in HTML of each component.

On Sun 2 Oct, 2016, 21:22 Stefan Weghofer, notifications@github.com wrote:

+1

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#6528 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AI7w2Iy1v6_xhs2Sy0zVwM2JaXEsoN8xks5qv9NTgaJpZM4IekjS
.

[CKGrafico]

Ok, we """""""solved"""""" that like this.

Before:
Routing

$stateProvider
            .state("home.features", {
                url: "/features",
                views: {
                    "main@home": {
                        template: "<features-page></features-page>"
                    }
                }
            });

The view

<ion-view view-title="Playlist">
<ion-nav-buttons side="right">
        <button class="button button-icon">Button</button>
      </ion-nav-buttons>
  <ion-content>
    <h1>Playlist</h1>
  </ion-content>
</ion-view>

After:
Routing

$stateProvider
            .state("home.features", {
                url: "/features",
                views: {
                    "main@home": {
                        templateUrl: "thecomponent.component.html"
                    }
                }
            });

The view

<ion-view view-title="Playlist">
<ion-nav-buttons side="right">
        <button class="button button-icon">Button</button>
      </ion-nav-buttons>
  <ion-content>
    <my-component></my-component>
  </ion-content>
</ion-view>

The component

<h1>Playlist</h1>

[ivanovvitaly]

That looks like alternative solution, but really it adds just few more extra files for page and component on that page.

Really it is the same as I posted, that is works fine

$stateProvider
            .state("home.features", {
                url: "/features",
                views: {
                    "main@home": {
                        templateUrl: "app/home/features/features.tmpl.html",
                        controller: "FeaturesController as $ctrl"
                    }
                }
            });

[CKGrafico]

@ivanovvitaly yes you're right xD

[jgw96]

This issue was moved to ionic-team/ionic-v1#134