我尝试使用ui.router和ui.angular.datetimepicker创建包含datetimepicker的angular的多步骤表单。
我已经将表单全部工作并加载了选择器，但我收到了一个奇怪的错误：
Uncaught TypeError: object is not a functionangular-animate.js:938 (anonymous function)
2angular.js:11607 TypeError: Cannot read property 'then' of undefined
at Object.ngIfWatchAction [as fn] (angular.js:21974)
at Scope.$get.Scope.$digest (angular.js:14243)
at Scope.$get.Scope.$apply (angular.js:14506)
at HTMLSpanElement.<anonymous> (angular.js:21443)
at HTMLSpanElement.eventHandler (angular.js:3014)angular.js:11607 (anonymous function)angular.js:8557 $getangular.js:14261 $get.Scope.$digestangular.js:14506 $get.Scope.$applyangular.js:21443 (anonymous function)angular.js:3014 eventHandler
每当我在表单上选择日期时。我有点角色并尝试弄清楚这是什么 - 我正在添加来自谷歌托管图书馆的angular-animate.js文件，所以这没关系 - 任何人都可以帮忙吗？
我有以下应用：
angular.module('formApp', ['ngAnimate', 'ui.router', 'ui.bootstrap', 'ui.bootstrap.datetimepicker' ])
// configuring our routes
// =============================================================================
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// route to show our basic form (/form)
.state('form', {
url: '',
templateUrl: 'views/home.html',
controller: 'formController'
})
// nested states
// each of these sections will have their own view
// url will be nested (/form/profile)
.state('form.date', {
url: '',
templateUrl: 'views/form-date.html'
})
// url will be /form/interests
.state('form.address', {
url: '/',
templateUrl: 'views/form-interests.html'
})
// url will be /form/payment
.state('form.payment', {
url: '/',
templateUrl: 'views/form-payment.html'
})
// url will be /form/payment
.state('form.appointments', {
url: '/appointments',
});
// catch all route
// send users to the form page
$urlRouterProvider.otherwise('/');
})
我有以下home.html：
<div id="form-container">
<div class="page-header text-center">
<!-- the links to our nested states using relative paths -->
<!-- add the active class if the state matches our ui-sref -->
<div id="status-buttons" class="text-center">
<a ui-sref-active="active" ui-sref=".date"><span>1</span> Date</a>
<a ui-sref-active="active" ui-sref=".address"><span>2</span> Address</a>
<a ui-sref-active="active" ui-sref=".payment"><span>3</span> Payment</a>
</div>
</div>
<!-- use ng-submit to catch the form submission and use our Angular function -->
<form id="signup-form" ng-submit="processForm()">
<!-- our nested state views will be injected here -->
<div id="form-views" ui-view></div>
</form>
</div>
然后注入form-date.html：
<h3>When would you like a helper?</h3>
<datetimepicker data-ng-model="formData.date"
data-datetimepicker-config="{ startView:'day', minView:'hour' }" />
<div> You've selected: {{formData.date}}</div>
<div class="form-group row">
<div class="col-xs-6 col-xs-offset-3">
<a ui-sref="form.payment" class="btn btn-block btn-info">
Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</div>
我使用自定义CSS进行动画样式设计：
/* ANIMATION STYLINGS
============================================================================= */
#signup-form { position:relative; min-height:300px; overflow:hidden; padding:30px; }
#form-views { width:auto; }
/* basic styling for entering and leaving */
/* left and right added to ensure full width */
#form-views.ng-enter,
#form-views.ng-leave { position:absolute; left:30px; right:30px;
transition:0.5s all ease; -moz-transition:0.5s all ease; -webkit-transition:0.5s all ease;
}
/* enter animation */
#form-views.ng-enter {
-webkit-animation:slideInRight 0.5s both ease;
-moz-animation:slideInRight 0.5s both ease;
animation:slideInRight 0.5s both ease;
}
/* leave animation */
#form-views.ng-leave {
-webkit-animation:slideOutLeft 0.5s both ease;
-moz-animation:slideOutLeft 0.5s both ease;
animation:slideOutLeft 0.5s both ease;
}
/* ANIMATIONS
============================================================================= */
/* slide out to the left */
@keyframes slideOutLeft {
to { transform: translateX(-200%); }
}
@-moz-keyframes slideOutLeft {
to { -moz-transform: translateX(-200%); }
}
@-webkit-keyframes slideOutLeft {
to { -webkit-transform: translateX(-200%); }
}
/* slide in from the right */
@keyframes slideInRight {
from { transform:translateX(200%); }
to { transform: translateX(0); }
}
@-moz-keyframes slideInRight {
from { -moz-transform:translateX(200%); }
to { -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
from { -webkit-transform:translateX(200%); }
to { -webkit-transform: translateX(0); }
}
编辑 - 控制器：
angular.module('formApp')
.controller('formController', ['$scope', function($scope) {
$scope.beforeRender = function ($view, $dates, $leftDate, $upDate, $rightDate) {
var index = Math.floor(Math.random() * $dates.length);
$dates[index].selectable = false;
}
// we will store all of our form data in this object
$scope.formData = {};
$scope.formData.date = "";
$scope.opened = false;
$scope.time1 = new Date();
$scope.showMeridian = true;
//Datepicker
$scope.dateOptions = {
'year-format': "'yy'",
'show-weeks' : false,
'show-time':true
};
// function to process the form
$scope.processForm = function() {
alert('awesome!');
var appointment = new Appointment();
console.log(appointment);
};
}]);
服务来自以下插件：
https://github.com/dalelotts/angular-bootstrap-datetimepicker
所以会怀疑它不在那里 - 但是因为我是一个小伙伴，我有点失落： - /
答案 0 :(得分：1)
我发现这导致了这个问题：
您可能在日期选择器中设置了选项。即：
datepicker-options="dateOptions"
现在，尝试将选项添加到控制器。即：
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
如果有帮助 - 我的HTML看起来像这样：
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="dd/MM/yyyy" ng-model="dt" is-open="status.opened"
min-date="minDate" max-date="'2020-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
答案 1 :(得分：0)
Angular-Animate是一个核心库，它的功能直接基于核心Angular库。 严重这些库保持同步。您必须为两个库使用相同的版本。