Ionic-framework: Critical: Using Angular 1.3 Component-based Directives breaks navigation

[opensorceror]

Check out this codepen:

http://codepen.io/anon/pen/wMrPBW?editors=100

It uses Angular 1.3 directives as components, in accordance with Angular 2 component-based philosophy. The navigation works perfectly when using Ionic Bundle 1.0.0-beta.9. However, the menu button disappears, preventing any kind of navigation when using ANY Ionic Bundle from the Ionic CDN (To verify this, I've commented out the latest Ionic bundle CDN include in the above Codepen's html file. Just uncomment it and you'll notice the issue).

I've lost many hairs over this. Just wondering if there is a newer way of doing the ion-nav-butttons in the newer releases.

The only workaround I found was using templateUrl in the states instead of template, which is old school and not the preferred method anymore.

[mlynch]

I don't follow. Do you have more info so I can see the issue?

[plraphael]

I'm having the same problem...The buttons inside de ion-nav-buttons just disappears.

[opensorceror]

Hey Max,

Check out this codepen: http://codepen.io/anon/pen/dGVeNO

You can see the menu button, and use it to open up the menu and navigate around.

Now check out this one: http://codepen.io/anon/pen/KVXRab

The entire code is exactly the same, but the menu button is gone.

The first codepen uses Ionic Bundle 1.0.0-beta.9, while the second one uses Ionic Bundle 1.2.4.

[plraphael]

In my case, I reproduced this using meteor atmospheres ionic package, that is on version 1.1.0_2.

[opensorceror]

@plraphael You're right! I also had the same issue with the driftyco:ionic package for meteor.

I resolved it temporarily by using templateUrl instead of template in the $stateProvider states.

[plraphael]

@opensorceror Thanks for the workaround! I forgot to say that it worked for me too. This was very very annoying, wasted at least 2 hours until finally I came across this issue. You saved the day. Thanks.

ps: Since this touched on ionic package for meteor, it would be really helpful if you guys could publish the latest ionic version to atmosphere. I already commented on both open issues that address the topic, but one of them is a month old and no reply, so I thought it would not hurt to mention again. Thanks.

[opensorceror]

I don't think its an issue with not having the latest package. As I showed in the Codepens above, it actually works for a much older beta version of Ionic but doesn't work in the newest stable one.

[plraphael]

@opensorceror I think you are right about the version. The version update was just a request, with the hopes of being listened :D lol...I think you pinpointed the problem very well.

[plraphael]

@opensorceror I was a week off, was there any progress on this that you know of (perhaps on another issue)?

[opensorceror]

@plraphael Nope, I haven't seen any movement on this issue since. I'm not aware of other issues that might be similar.

[Urigo]

The Ionic version on Atmosphere was updated - https://atmospherejs.com/driftyco/ionic

[opensorceror]

Still getting this issue.

I'm also not able to use Meteor 1.3 (Angular-Meteor) with Ionic because Meteor 1.3 introduces the concept of ES2016 modules, which do not seem to work with Ionic 1.2.4.

[Urigo]

@opensorceror I'm not sure about the Ionic part of that issue, but I've updated the Atmosphere package to the latest version and also, with Meteor 1.3, you can (and should) simply use Ionic from npm and import it with ES6 modules syntax.

We've updated all of the angular-meteor Ionic tutorials to show how it's done:

1. Socially Ionic chapter
2. Whatsapp clone with the Meteor platform
3. Whatsapp clone with Ionic CLI and Meteor backend

So if that issue still persists, I don't think it's Meteor related..

[jgw96]

Thanks for the info @Urigo ! Is anyone still having this issue with ionic 1.3.0? Everything should just work?

[siyong]

@jgw96, still getting the issue even on 1.3.1 .

changing ionic to 1.3.1 in @opensorceror 's codepen and it is not fixed.

[Charcolios]

Hello all, thank you for all the hard work put in to Ionic and angular-meteor. I have greatly enjoyed using it over the last few years.

I have been working on a new app that I loosely based off of @Urigo 's wonderful angular-meteor tutorial. I hit a few snags during this process, and have uploaded a very simple app containing three components to demonstrate this bug. It seems that this issue is closely related to #6528 . I also included a demonstration of issue #6661 with the "button-clear" class. Hope this helps. I may have some time in the next few weeks to dig in to the source code.

https://github.com/Charcolios/ionic-bugs-demo

[DriesVandermeulen]

@jgw96 Any news on this issue? I think this has something to to with scope isolation. Directives are able to share scope by passing scope: true. The new component syntax does not allow this anymore. Check how the component options are matched to the directive options in this sample from the angular source code registerComponent function.

return {
        controller: controller,
        controllerAs: identifierForController(options.controller) || options.controllerAs || '$ctrl',
        template: makeInjectable(template),
        templateUrl: makeInjectable(options.templateUrl),
        transclude: options.transclude,
        scope: {},
        bindToController: options.bindings || {},
        restrict: 'E',
        require: options.require
      };

See that the scope option is always isolated ({} means isolated scope) for a component. I think at one point you were able to pass the option isolate: false to a compoent as you can see in this video from Todd Motto explaining how component options map to directive options.

Changing scope: {} to scope: options.isolate === false ? true : {} in the sample above (like in the video) and providing the option isolate: false in your component will partially fix this issue... Title and buttons are shown correctly but when I click back button northing happens.

Update:
The above changes will fix this issue. The back button not working was another problem.

Now how de we go from here? This fix requires a change in the angular source code to allow non-isolate scope for a component. The angular team consciously made the choose to not allow this...

Update 2:
As a temporary workaround you can specify the ion-view not as a element in your component but as a attribute directive in your router template definition.

.state('home', {
    url: '/home',
    parent: 'authorized',
    views: {
        '@authorized': { template: <home-view ion-view  /> }
    }
});

I don't really like this solution but it provides a workaround for now.

[vpsouza]

@DriesVandermeulen the attribute directive ion-view does not work for me. ionic v1.3.1

[DriesVandermeulen]

@vpsouza If you give me some more info or a code snippet I might be able to help you.

[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

[almothafar]

I have same issue of @ivanovvitaly , I noticed that the component tag wrap the ion-view so it break it down, I found annoying workaround, its to wrap the new tag with ion-view like:

template: "<ion-view><ion-nav-title>Title or image or whatever</ion-nav-title><features-page></features-page></ion-view>"

[jgw96]

This issue was moved to driftyco/ionic-v1#183

[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.