Monaca Onsen UI Discord Chat Github Repo

ng-click not working

  • I’m trying to integrate Onsen 2.0 into an existing project. The existing project uses Angular.
    I have this:

            <script src="scripts/externals/onsenui/js/onsenui.js"></script>
            <script src="scripts/externals/onsenui/js/angular-onsenui.js"></script>

    I also have angular.js, of course. In my index.html, I’m trying to get some buttons working in my toolbar:

                <div id="main-page">
                        <div class="left"><ons-back-button></ons-back-button></div>
                        <div class="right">
                            <ons-toolbar-button ng-click="alert('Clicked!')"><ons-icon icon="fa-comments" size="28px"></ons-icon></ons-toolbar-button>
                            <ons-toolbar-button onclick="alert('Clicked!')"><ons-icon icon="fa-user" size="28px"></ons-icon></ons-toolbar-button>

    When I click the second button, which uses onclick, I get the alert. When I click the first button, which uses ng-click, I get nothing. Furthermore, as long as I have that ng-click in there, Firebug gives me an “Error: node is undefined” in my console.

    When I try it outside the toolbar in an ons-button instead of ons-toolbar-button, the ng-click still does nothing, although the error does go away.

    I have this vague notion that I need to be using ons.bootstrap() somewhere, but it’s not clear to me where or how. When I tried it, I got an error that said “App already bootstrapped”.

    How do I get ng-click to work? Instead of the alerts, I want to call functions that are in $scope, so I can’t just use onclick.

  • I figured it out. I just needed to add ‘onsen’ to the angular.module list argument. Fortunately, my teammate on this project understands Angular better than I do.
    There’s a perfectly good example in the OnsenUI github, too:
    I didn’t realize when I first looked at it that that was in there. Once I found it, it made things much clearer.