Onsen v2 with Angular 1.5 component



  • 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?


  • Onsen UI

    @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!


Log in to reply