Encountering an issue with the datepicker feature from the mgcrea.ngStrap library. Here is a glimpse of my layout file setup:
<html lang="en-US" ng-app="ftc">
<head>
<script src="/assets/2db3448a/components/angular.js/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-animate.min.js"></script>
<script src="/assets/2db3448a/components/angular-route/angular-route.min.js"></script>
<script src="/assets/2db3448a/mgcrea/angular-strap/dist/angular-strap.min.js"></script>
<script src="/assets/2db3448a/mgcrea/angular-strap/dist/angular-strap.tpl.min.js"></script>
<!-- Additional JS libs and stylesheet inclusions follow... -->
</head>
<body ng-controller="ApplicationController as appCtrl">
<div class="container">
<div ng-view></div>
</div>
<script src="/assets/60113bca/jquery.min.js"></script>
<script src="/js/app.js"></script>
<script src="/js/controllers/application-controller.js"></script>
<script src="/js/controllers/event-create.js"></script>
<!-- Other necessary JS files included here -->
</body>
</html>
Even after moving jQuery to the head section, I faced the same obstacle.
The application definition can be found in 'app.js':
angular.module('ftc', [ 'ngRoute', 'ngAnimate', 'mgcrea.ngStrap', 'anguvideo', 'uiGmapgoogle-maps'])
.config(['$routeProvider', '$httpProvider', 'uiGmapGoogleMapApiProvider',
function($routeProvider, $httpProvider, uiGmapGoogleMapApiProvider) {
// Routing and Google Maps configurations are set here
}]);
For the EventCreateController ('event-create.js'):
angular.module('ftc')
.controller('EventCreateController', ['$location', '$http', '$scope', 'uiGmapGoogleMapApi',
function($location, $http, $scope, uiGmapGoogleMapApi){
//Related Google Maps API code resides here
...
}]);
Within the view file 'create.html', a form alongside a Google map preview is constructed. Among the inputs, one specifically implements ngStrap.datepicker. The relevant snippet looks like this:
<form ng-submit="eventCtrl.add()" name="eventForm" id="event-form"
method="post" role="form" novalidate>
<div class="form-group required col-lg-6">
<label for="startDate" class="control-label sr-only">Start Date</label>
<input ng-model="event.startDate" type="text" id="startDate" class="form-control"
name="startDate" bs-datepicker required>
</div>
<!-- Additional form elements here -->
</form>
The challenge at hand:
An error message present in the Chrome JavaScript console reads:
https://docs.angularjs.org/error/$injector/unpr?p0=$$rAFProvider%20%3C-%20$$rAF%20%3C-%20$tooltip%20%3C-%20$datepicker%20%3C-%20bsDatepickerDirective
All other libraries integrate seamlessly ('ngRoute', 'anguvideo', 'uiGmapgoogle-maps'). These dependencies were installed via composer within a PHP yii2 framework-based application.
Versions: AngularJS - 1.2.0; mgcrea.ngStrap - 2.3.6.
Any insights on what might be missing or causing this hindrance?
Cheers, Kamil