将时间选择器集成到Ionic应用程序中

Integrating timepicker into Ionic app

本文关键字：Ionic 应用程序 集成 时间 选择器      更新时间：2023-09-26

我正在为ionic应用程序使用时间选择器，并试图将以下内容集成到应用程序

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

所以我复制了上面的代码，并把js代码放入控制器中，当你点击输入字段时，时钟显示，但当你尝试选择一个小时/分钟时，它不做任何事情-它看起来不像函数被击中。

不知道是不是和里面的离子标签有关:

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

或者我需要做一个angular指令之类的吗?

我承认，我不是很擅长jQuery，但在我看来，你是在使用jQuery并将其粘贴到Angular的控制器中，这通常是不好的做法，不会起作用。

编辑:(找到解决方案)

幸运的是，你不需要在没有jQuery的情况下重写这个。你的问题不在于jQuery和Angular的集成，而在于你在实现Angular时的错误。下面列出了一些问题，如果解决了这些问题，将会解决您的问题。

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

如果您打开jsFiddle并按ctrl+shift+i打开控制台和源代码，您将在控制台看到jsFiddle shell的第370行错误"Uncaught SyntaxError: Unexpected token)"。如果单击fiddle.jshell.net/:370的行号链接，您将看到它在该点(就在$('#input').timepicker();行之后)不期望")"字符。所以你在某个地方出错了，搞砸了你的javascript。缺少)可能意味着jQuery可能存在问题。这就引出了第二个错误。

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

    • 这个错误是说当angular寻找你的myApp控制器的定义时，它找不到它。这是一个危险信号，表明您错误地定义了模块的控制器。因为错误发生在angular文件中，因为这是在js文件中，错误的冒泡效果很差。它报告angular中发生的错误，但不会告诉你它在代码中哪一行遇到了问题，问题实际上发生在哪里。此时，您需要逐步遍历代码并确保所有操作都正确。

    下面是没有使用jQuery的angular代码。 

    var myApp = angular.module('myApp',[]);
MyApp.controller('clockCtrl'), function($scope) {

});

    注意到一些问题吗?

    MyApp.controller('clockCtrl'), function($scope) { });
    上面的代码应该是: 
    myApp.controller('clockCtrl', function($scope) {   });

    所以是的，它在你的页面的末尾击中了)，并说"为什么这是在这里，什么是 'clockCtrl' ?"你将'clockCtrl'分配给一个名为MyApp的模块(不存在，你的称为MyApp)，你将)放在错误的地方。

    第二个问题在你的标记中:

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

    在angular中有一个很重要的要求，那就是你要在元素中包含以下属性，以便在你的标记中包装任何angular指令。我将使用div作为示例:

    <div ng-app="moduleNameGoesHere">
//directives go here
</div>

    不，jsfiddle不会为你添加这些。说到jsfiddle，您可以在左侧选择jQuery作为js文件，将其放置在没有换行的主体中。你首先需要Angular。顺便提一下，angular内置了jqlite，它包含了jQuery中90%最常用的功能。将jQuery切换为angular。做了所有这些更改后，幸运的是，jQuery按预期工作，没有任何问题。虽然我想说，如果你打算继续使用angular，我会把它重写为一个指令，至少不要为你的angular代码编写任何新的jQuery花絮。(这里有一些资源解释了为什么在angular中不需要、不需要或不可取的jQuery)

    TLDR:这里是一个工作的jsFiddle

    请查看我的设计它很简单，很容易打磨。

    AngularJS的timepicker和datepicker指令，带有IOS闹钟样式。你可以把它放在你的ios风格的移动html5应用动画感觉时间选择器。它是一个碱。您可以通过修改css来修饰自己的样式时间选择器。图片

    相关文章：