3. Binding do not work in <ons-toolbar> with AngularJS Component

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Binding do not work in <ons-toolbar> with AngularJS Component

  • O

    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;
    0