Lorna Kelly Lorna Kelly - 6 months ago 29
AngularJS Question

Integrating timepicker into Ionic app

I am playing around with timepickers for an ionic app and am trying to integrate the below into an app

http://codepen.io/mnpenner/pen/mFokd

So I copied the code from above and put the js code into a controller and when you click on the input field the clock shows but when you try and select an hour/minute it doesn't do anything - it doesn't look like the functions are getting hit.

Wondering is it something to do with the ion tags its inside:

<ion-view data-ng-controller="clockCtrl">
<ion-content>
<input id="input" />
</ion-content>
</ion-view>


Or do I have to make an angular directive or something?

Answer

I'll admit, I'm not the very strong with jQuery, but it looks to me like you're using jQuery and pasting it into a controller in Angular, which in general is bad practice and won't work.

Edit: (Solution found)

Lucky for you you won't have to rewrite this without jQuery. Your problems weren't in integration between jQuery and Angular, but rather they were faults in your implementation of angular. Below are a list of issues that when fixed will resolve your issue.

  1. Uncaught SyntaxError: Unexpected token ) -- fiddle.jshell.net/:370

If you open your jsFiddle and press ctrl+shift+i to open the console and source, you'll see in the console the error "Uncaught SyntaxError: Unexpected token )" on line 370 of the jsfiddle shell. If you click on the line number link that says fiddle.jshell.net/:370 you'll see that it's not expecting the ')' character at that point (right after the line $('#input').timepicker();). So somewhere you went wrong and messed up your javascript. That missing ) could mean that maybe there's an issue in the jQuery. Which leads us to the second error.

  1. Uncaught Error: No module: myApp -- code.angularjs.org/angular-1.0.1.js:1058

This error is saying that when angular looked for your definition of the myApp controller, it couldn't find it. This is a red flag that you have defined your module's controller incorrectly. Because the error is occurring in the angular file, and because this is in a jsfiddle, the bubble up of errors is kind of poor. It reports the error occurring in angular and doesn't tell you what line it hit the issue in your code where the issue actually occurs. At this point you need to step through your code and make sure you've done everything correctly.

Here is your angular code without the jQuery for the timepicker.

var myApp = angular.module('myApp',[]);

MyApp.controller('clockCtrl'), function($scope) {


});

Notice a few issues?

MyApp.controller('clockCtrl'), function($scope) { });

The above code should read:

myApp.controller('clockCtrl', function($scope) {   });

So yes, it was hitting the ) at the end of your page and saying "why the hell is this here, and what the heck is 'clockCtrl'?" You were assigning 'clockCtrl' to a module called MyApp (which doesn't exist, yours is called myApp) and you were placing a ) in the wrong place.

The second issue is in your markup:

<div ng-controller="clockCtrl">
 <input id="input" />
</div>

An important requirement in angular is that you include the following attribute on an element that wraps around any angular directives in your markup. I will use div as an example:

<div ng-app="moduleNameGoesHere">

//directives go here

</div>

And no, jsfiddle does not add that for you. Speaking of jsfiddle, along the left side of your fiddle you selected jQuery as your js file to place in the body with no wrap. You need Angular first and foremost. And as an FYI, angular has jqlite built in, which includes 90% of the most commonly used functionality in jQuery. Switch the jQuery to angular in the fiddle. With all these changes made, luckily the jQuery works as expected with no hitches. Although I'd like to say if you're planning to continue with angular I would rewrite this as a directive and at the very least don't write any new jQuery tidbits for your angular code. (there are several resources which explain why jQuery isn't needed, necessary, or desirable in angular)

TLDR: here is a working jsFiddle