Question

我正在玩一个离子应用程序的时间戳，我正在尝试将下面的内容集成到一个应用程序中

所以我复制了上面的代码并将js代码放入控制器中，当你点击输入字段时，时钟会显示，但当你尝试选择一小时/分钟时，它什么都不做 - 它没有＆看起来这些功能正在被击中。

想知道它与内部的离子标签有什么关系：

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

或者我是否必须制定角度指令？

Answer 1

我承认，我并不是jQuery的强者，但我认为你喜欢使用jQuery并将其粘贴到Angular的控制器中，这通常是不好的做法并且不会工作。

编辑:(找到解决方案）

幸运的是，你不必在没有jQuery的情况下重写它。你的问题不是jQuery和Angular之间的集成，而是你的angular实现中的错误。以下是修复后的问题列表将解决您的问题。

未捕获的SyntaxError：意外的令牌） - fiddle.jshell.net/:370

如果您打开jsFiddle并按ctrl + shift + i打开控制台和源，您将在控制台中看到错误＆＃34; Uncaught SyntaxError：Unexpected token）＆＃34;在jsfiddle外壳的第370行。如果您点击显示fiddle.jshell.net/:370的行号链接，您会发现它没有预料到＆＃39;）＆＃39;该点的字符（在$('#input').timepicker();行之后）。所以在某个地方你出错并搞砸了你的javascript。那个缺失）可能意味着jQuery中可能存在问题。这导致我们出现第二个错误。

未捕获错误：没有模块：myApp - code.angularjs.org/angular-1.0.1.js:1058

此错误表示当angular查找myApp控制器的定义时，它无法找到它。这是一个红旗，您已经错误地定义了模块的控制器。因为错误发生在角度文件中，并且因为这是一个jsfiddle，所以错误的冒泡很糟糕。它会报告角度发生的错误，并且不会告诉您在代码中问题实际发生的位置。此时，您需要单步执行代码并确保已正确完成所有操作。

这是你的角度代码，没有时间戳的jQuery。

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

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


});

注意几个问题？

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

上面的代码应为：

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

所以，是的，它正在点击页面末尾的)并说＆＃34;为什么这里到底是什么，以及它是什么 {{1} }＆＃34？;您将'clockCtrl'分配给名为MyApp的模块（该模块不存在，您的名称为myApp），并且您将'clockCtrl'放在错误的位置。

第二个问题出在你的标记中：

angular中的一个重要要求是在包含标记中任何角度指令的元素上包含以下属性。我将使用div作为例子：

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

不，jsfiddle不会为你添加。说到jsfiddle，在你的小提琴的左侧，你选择jQuery作为你的js文件放在身体没有包装。你首先需要Angular。而作为一个FYI，angular内置了jqlite，其中包含了jQuery中90％最常用的功能。将jQuery切换为小提琴中的角度。通过所有这些更改，幸运的是jQuery按预期工作，没有任何障碍。虽然我想说如果您计划继续使用角度，我会将其重写为指令，并且至少不要为您的角度代码编写任何新的jQuery花絮。（有几个资源可以解释为什么jQuery不是必需的，必要的，或者在角度上是可取的）

TLDR：here is a working jsFiddle

Answer 2

请检查我的design。它非常简单，易于抛光。

具有IOS警报风格的timepicker和datepicker的AngularJS指令。您可以将它放入您的移动html5应用程序中，以获得ios风格的动画时间选择器。这是一个基地。您可以通过修改css来装饰自己的样式时间戳。 image

将timepicker集成到Ionic app中

2 个答案: