我正在尝试将ui-calendar（https://github.com/angular-ui/ui-calendar）集成到一个角度应用程序中并获得错误。我使用yeoman生成了应用程序的结构，然后尝试将ui-calendar集成到应用程序中，但我得到以下错误
Loading "imagemin.js" tasks...ERROR
>> Error: Cannot find module 'imagemin-gifsicle'
Running "newer:jshint" (newer) task
Running "newer:jshint:all" (newer) task
Running "jshint:all" (jshint) task
app/scripts/calendar.js
line 16 col 7 Missing "use strict" statement.
line 45 col 18 Strings must use singlequote.
line 141 col 22 Did you mean to return a conditional instead of an assignment?
line 172 col 5 Missing "use strict" statement.
line 12 col 5 'Appointment1App' is defined but never used.
line 254 col 60 'oldTokens' is defined but never used.
line 254 col 49 'newTokens' is defined but never used.
line 262 col 48 'oldO' is defined but never used.
line 262 col 43 'newO' is defined but never used.
✖ 9 problems
Warning: Task "jshint:all" failed. Use --force to continue.
Aborted due to warnings.
以下是我的controller.js文件中的代码
var Appointment1App = angular.module('ui.calendar', [])
.constant('uiCalendarConfig', {})
.controller('uiCalendarCtrl', ['$scope', '$timeout', function($scope, $timeout){
var sourceSerialId = 1,
eventSerialId = 1,
sources = $scope.eventSources,
extraEventSignature = $scope.calendarWatchEvent ? $scope.calendarWatchEvent : angular.noop,
wrapFunctionWithScopeApply = function(functionToWrap){
var wrapper;
if (functionToWrap){
wrapper = function(){
// This happens outside of angular context so we need to wrap it in a timeout which has an implied apply.
// In this way the function will be safely executed on the next digest.
var args = arguments;
var _this = this;
$timeout(function(){
functionToWrap.apply(_this, args);
});
};
}
return wrapper;
};
this.eventsFingerprint = function(e) {
if (!e.__uiCalId) {
e.__uiCalId = eventSerialId++;
}
// This extracts all the information we need from the event. http://jsperf.com/angular-calendar-events-fingerprint/3
return "" + e.__uiCalId + (e.id || '') + (e.title || '') + (e.url || '') + (+e.start || '') + (+e.end || '') +
(e.allDay || '') + (e.className || '') + extraEventSignature(e) || '';
};
this.sourcesFingerprint = function(source) {
return source.__id || (source.__id = sourceSerialId++);
};
this.allEvents = function() {
// return sources.flatten(); but we don't have flatten
var arraySources = [];
for (var i = 0, srcLen = sources.length; i < srcLen; i++) {
var source = sources[i];
if (angular.isArray(source)) {
// event source as array
arraySources.push(source);
} else if(angular.isObject(source) && angular.isArray(source.events)){
// event source as object, ie extended form
var extEvent = {};
for(var key in source){
if(key !== '_uiCalId' && key !== 'events'){
extEvent[key] = source[key];
}
}
for(var eI = 0;eI < source.events.length;eI++){
angular.extend(source.events[eI],extEvent);
}
arraySources.push(source.events);
}
}
return Array.prototype.concat.apply([], arraySources);
};
// Track changes in array by assigning id tokens to each element and watching the scope for changes in those tokens
// arguments:
// arraySource array of function that returns array of objects to watch
// tokenFn function(object) that returns the token for a given object
this.changeWatcher = function(arraySource, tokenFn) {
var self;
var getTokens = function() {
var array = angular.isFunction(arraySource) ? arraySource() : arraySource;
var result = [], token, el;
for (var i = 0, n = array.length; i < n; i++) {
el = array[i];
token = tokenFn(el);
map[token] = el;
result.push(token);
}
return result;
};
// returns elements in that are in a but not in b
// subtractAsSets([4, 5, 6], [4, 5, 7]) => [6]
var subtractAsSets = function(a, b) {
var result = [], inB = {}, i, n;
for (i = 0, n = b.length; i < n; i++) {
inB[b[i]] = true;
}
for (i = 0, n = a.length; i < n; i++) {
if (!inB[a[i]]) {
result.push(a[i]);
}
}
return result;
};
// Map objects to tokens and vice-versa
var map = {};
var applyChanges = function(newTokens, oldTokens) {
var i, n, el, token;
var replacedTokens = {};
var removedTokens = subtractAsSets(oldTokens, newTokens);
for (i = 0, n = removedTokens.length; i < n; i++) {
var removedToken = removedTokens[i];
el = map[removedToken];
delete map[removedToken];
var newToken = tokenFn(el);
// if the element wasn't removed but simply got a new token, its old token will be different from the current one
if (newToken === removedToken) {
self.onRemoved(el);
} else {
replacedTokens[newToken] = removedToken;
self.onChanged(el);
}
}
var addedTokens = subtractAsSets(newTokens, oldTokens);
for (i = 0, n = addedTokens.length; i < n; i++) {
token = addedTokens[i];
el = map[token];
if (!replacedTokens[token]) {
self.onAdded(el);
}
}
};
return self = {
subscribe: function(scope, onChanged) {
scope.$watch(getTokens, function(newTokens, oldTokens) {
if (!onChanged || onChanged(newTokens, oldTokens) !== false) {
applyChanges(newTokens, oldTokens);
}
}, true);
},
onAdded: angular.noop,
onChanged: angular.noop,
onRemoved: angular.noop
};
};
this.getFullCalendarConfig = function(calendarSettings, uiCalendarConfig){
var config = {};
angular.extend(config, uiCalendarConfig);
angular.extend(config, calendarSettings);
angular.forEach(config, function(value,key){
if (typeof value === 'function'){
config[key] = wrapFunctionWithScopeApply(config[key]);
}
});
return config;
};
}])
.directive('uiCalendar', ['uiCalendarConfig', '$locale', function(uiCalendarConfig, $locale) {
// Configure to use locale names by default
var tValues = function(data) {
// convert {0: "Jan", 1: "Feb", ...} to ["Jan", "Feb", ...]
var r, k;
r = [];
for (k in data) {
r[k] = data[k];
}
return r;
};
var dtf = $locale.DATETIME_FORMATS;
uiCalendarConfig = angular.extend({
monthNames: tValues(dtf.MONTH),
monthNamesShort: tValues(dtf.SHORTMONTH),
dayNames: tValues(dtf.DAY),
dayNamesShort: tValues(dtf.SHORTDAY)
}, uiCalendarConfig || {});
return {
restrict: 'A',
scope: {eventSources:'=ngModel',calendarWatchEvent: '&'},
controller: 'uiCalendarCtrl',
link: function(scope, elm, attrs, controller) {
var sources = scope.eventSources,
sourcesChanged = false,
eventSourcesWatcher = controller.changeWatcher(sources, controller.sourcesFingerprint),
eventsWatcher = controller.changeWatcher(controller.allEvents, controller.eventsFingerprint),
options = null;
function getOptions(){
var calendarSettings = attrs.uiCalendar ? scope.$parent.$eval(attrs.uiCalendar) : {},
fullCalendarConfig;
fullCalendarConfig = controller.getFullCalendarConfig(calendarSettings, uiCalendarConfig);
options = { eventSources: sources };
angular.extend(options, fullCalendarConfig);
var options2 = {};
for(var o in options){
if(o !== 'eventSources'){
options2[o] = options[o];
}
}
return JSON.stringify(options2);
}
scope.destroy = function(){
if(attrs.calendar) {
scope.calendar = scope.$parent[attrs.calendar] = elm.html('');
} else {
scope.calendar = elm.html('');
}
};
scope.init = function(){
scope.calendar.fullCalendar(options);
};
eventSourcesWatcher.onAdded = function(source) {
scope.calendar.fullCalendar('addEventSource', source);
sourcesChanged = true;
};
eventSourcesWatcher.onRemoved = function(source) {
scope.calendar.fullCalendar('removeEventSource', source);
sourcesChanged = true;
};
eventsWatcher.onAdded = function(event) {
scope.calendar.fullCalendar('renderEvent', event);
};
eventsWatcher.onRemoved = function(event) {
scope.calendar.fullCalendar('removeEvents', function(e) { return e === event; });
};
eventsWatcher.onChanged = function(event) {
scope.calendar.fullCalendar('updateEvent', event);
};
eventSourcesWatcher.subscribe(scope);
eventsWatcher.subscribe(scope, function(newTokens, oldTokens) {
if (sourcesChanged === true) {
sourcesChanged = false;
// prevent incremental updates in this case
return false;
}
});
scope.$watch(getOptions, function(newO,oldO){
scope.destroy();
scope.init();
});
}
};
}]);
这是index.html中的代码
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="Appointment1App">
<div ui-calendar ng-model="eventSources"></div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div class="container">
<div class="header">
<ul class="nav nav-pills pull-right">
<li class="active"><a ng-href="#">Home</a></li>
<li><a ng-href="#">About</a></li>
<li><a ng-href="#">Contact</a></li>
</ul>
<h3 class="text-muted">appointment1</h3>
</div>
<div ng-include="'views/main.html'" ng-controller="MainCtrl"></div>
<div class="footer">
<p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
</div>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/affix.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/alert.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/button.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/carousel.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/collapse.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/dropdown.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tab.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/transition.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/scrollspy.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/modal.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tooltip.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/popover.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/calendar.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
</body>
</html>
答案 0 :(得分：0)
不确定您是否解决了问题，但我从他们的github帐户中找到了这个问题： https://github.com/yeoman/generator-angular/issues/521
基本上说你必须更换jshint：all：src配置行：
'<%= yeoman.app %>/scripts/{,*/}*.js'
使用：
'<%= yeoman.app %>/scripts/{**/*}*.js'
为我工作。