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