CheckBox and ng-click not firing

ionic-v1
1

I have built up an application that is running as expected on the desktop chrome browser.

However, when running on the latest Android/IOS devices, an ng-click never fires. If I add the standard onchange handler, it fires just fine. This is all running in the browser and not as an ‘application’.

What say ye?

   <li class="item item-toggle">
                        Attending?
                        <label class="toggle">
                          <input type="checkbox" ng-click="attendChange(session)" ng-checked="session.attendees[suser.id] == true" style="background-color: transparent; border: none">
                          <div class="track">
                            <div class="handle"></div>
                          </div>
                        </label>
                     </li>



 $scope.attendChange = function(session){
   // do some stuff
}
2

You may want to NOT use the raw HTML to create this. Instead, consider using the Ionic built-in toggle directive. I get really strange issues when trying to use hand-coded checkboxes and radios with Ionic.

NOTE : I couldn’t attach an ng-click to the <toggle> directive. So, I watched the model to be aware of the change.
Here’s a sample plnkr.

3

You the man @Calendee as that fixed it! +10

Now, can somebody please explain to the lay person fundamentally why my first experiment gone bad didn’t work?

I also noticed that I couldn’t add my own ng-click as it is already declared in the directive. How do I add-in my own ng-click so I can do some cleanup around the toggle?

4

Hey @jfinnigan, like @Calendee said, the reason you want to use the Angular directives when we offer them is because if you just use the markup, there is no logic to wire up events, etc. Think of the <toggle> directive as a self-contained component that may or may not have child DOM you don’t need to worry about, it just works.

Does that make sense?

5

Thanks @max. It’s just that it was working as expected on the desktop chrome. I figured the ng-click is generic and angular is ‘wiring’ it all up under the hood. Bad assumption. :wink:

6

@jfinnigan, if you look at ionic.css, you can see that the HTML input element is actually hidden:

/* hide the actual input checkbox */
.toggle input {
  display: none; }

The erratic behavior may be a function of the different ways browsers and web views handle the user events on the hidden element.

7

This should all be pretty cleared up with the latest release. 0.9.21 Alpha Maine Coon