Ionic-framework: ion-nav-bar not working properly when using components

[DAB0mB]

Hi all!

I've been trying to implement a component-based app using [email protected], 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.

[DriesVandermeulen]

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, [email protected] wrote:

+1

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/driftyco/ionic/issues/6528#issuecomment-250978133,
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 driftyco/ionic-v1#134

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.