Posts made by Ons-jutl

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;