Binding do not work in <ons-toolbar> with AngularJS Component
-
I am trying to use component() in AngularJS to make my owen <ons-toolbar>.
I made my own controller and tamplateHtml and set bindings to show the values in controller,
but it dose not work.
When i run the project, it shows {{$ctrl.backBtnNm}} and {{$ctrl.titleNm}} in html.
There is a alert() in compnent’s constructor, when i run the project, it shows the bingding values successfully.
I don’t know why bingding values dose not show in html correctlly.This is my code.
class CommonToolbarController { constructor() { var self = this; alert(self.backBtnNm + self.titleNm + self.toolbarBtnNm); } toolbarBtnClick() { alert('Common Ctrl ToolbarBtnClick!'); this.onToolbarBtnClick(); } } CommonToolbarController.$inject = []; var CommonToolbarComponent = { templateUrl : 'templates/Common/common_toolbar.html', controller : CommonToolbarController, transclude : true, bindings : { backBtnNm : '<', titleNm : '<', toolbarBtnNm : '<', hideToolbarBtn : '<', onToolbarBtnClick : '&' } }; export default CommonToolbarComponent;
<ons-toolbar> <div class="left"> <ons-back-button>{{ $ctrl.backBtnNm }}</ons-back-button> </div> <div class="center">{{ $ctrl.titleNm }}</div> <div class="right"> <ons-toolbar-button ng-click="$ctrl.toolbarBtnClick()" ng-hide="$ctrl.hideToolbarBtn">{{ $ctrl.toolbarBtnNm }}</ons-toolbar-button> </div> </ons-toolbar>
<ons-page ng-controller="commonTestController as comTestCtrl"> <common-toolbar back-btn-nm="comTestCtrl.backBtnNm" title-nm="comTestCtrl.titleNm" toolbar-btn-nm="comTestCtrl.toolbarBtnNm" hide-toolbar-btn="comTestCtrl.hideToolbarBtn" on-toolbar-btn-click="comTestCtrl.toolbarBtnClick();"></common-toolbar> </ons-page>
class CommonTestController { constructor() { this.backBtnNm = 'Back'; this.titleNm = 'Title'; this.toolbarBtnNm = 'Edit'; this.hideToolbarBtn = false; } toolbarBtnClick() { alert('Test ToolbarBtnClick!'); } } CommonTestController.$inject = []; export default CommonTestController;