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.

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">
                    <ons-toolbar>
                        <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>
                        </div>
                    </ons-toolbar>
                </div>
    

    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: https://github.com/OnsenUI/onsenui2-quickstart/blob/master/www/angular/app.js
    I didn’t realize when I first looked at it that that was in there. Once I found it, it made things much clearer.