3. ons-toolbar tilte not binding

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.

ons-toolbar tilte not binding

  • K

    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?

    0

  • 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.

    0