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;
    

Log in to reply