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.