Onsen v2 with Angular 1.5 component

kevinashkore

I am trying to use the new component with Angular 1.5. Unfortunately, it is not rendering correctly with the Onsen components. For example, I wanted to create a toolbar component. However, the properties won’t bind to <ons-toolbar>

Declared on my pages like so:

<shared.components.toolbar left="menu" center="Home Page" right=""></shared.components.toolbar>

The component html:

<ons-toolbar>
        <div class="left">
            <!-- Toolbar-button with different icons depending on the platform. -->
            <ons-toolbar-button component="button/menu">
                <ons-icon icon="ion-navicon, material:md-menu" size="32px, material:24px"></ons-icon>
            </ons-toolbar-button>
        </div>
        <div class="center">{{toolbar.center}}</div>
        <div class="right">

        </div>
    </ons-toolbar>

The component js:

angular.module('theApp').component('shared.components.toolbar', {
    templateUrl: './app/shared/components/toolbar.html',
    controller: toolbarController,
    controllerAs: 'toolbar',
    bindings: {
        left: '@',
        center: '@',
        right: '@'
    }
});

function toolbarController() {
    var vm = this;

}

Howver, it renders the page title as {{toolbar.center}} instead of binding correctly. Any ideas?

Fran Diox

@kevinashkore Angular 1.5 components haven’t been tested with Onsen UI so far. I guess they introduced it to make it more similar to Angular 2 and so developers can migrate their apps later on.
We will check this at some point but it’s not a priority right now. Any insight you have about this is welcome, especially in the shape of PRs!