ons-toolbar tilte not binding



  • I am not able to bind the title of the toolbar to my controller. i am using v2.0.0-rc.5
    example code

    <ons-template id="section.html">
                <ons-page ng-controller="SectionController as secCtrl">
                    <ons-toolbar title="{{secCtrl.SelectedFamily}}">
                        <div class="left">
                            <ons-toolbar-button ng-click="mySplitter.left.open()">
                                <ons-icon icon="md-menu"></ons-icon>
                            </ons-toolbar-button>
                        </div>
    
                    </ons-toolbar>
                    <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
                        {{secCtrl.SelectedFamily}}
                    </p>
                </ons-page>
        </ons-template>
    

    The value is displayed propelry inisde pages paragraph but it is empty on the title. Any ideas?



  • Well actually everything works fine.

    The reason why your code doesn’t “seem” to work is just because you’re setting the title attribute of the toolbar.

    If you check the resulting html you will see that the title attribute is, in fact, exactly what the SelectedFamily value is. However it’s just an attribute which isn’t used anywhere.

    I looked through both the v1 and v2 docs and I was unable to find any special meaning to that attribute.

    Basically what you will see in our examples is the following:

    <ons-toolbar>
      <div class="left"> ... </div>
      <div class="center"> ... </div>
      <div class="right"> ... </div>
    </ons-toolbar>
    

    So you can just put {{secCtrl.SelectedFamily}} in the center div and everything will be fine. :)

    Here’s a demo with your code.


Log in to reply