3

I'm working on a small angular project, in which I make use of the bootstrap calendar by mattlewis92, and I keep having problem with my controller.

Here is my .js file :

'use strict';

var app = angular.module('Calendrier574', ['ngMaterial', 'ngRoute', 'mwl.calendar', 'ui.bootstrap', 'ngTouch', 'ngAnimate']);

app.controller("cal574", function(moment, alert, $timeout, $log) {
var vm = this;

vm.events = [];
vm.calendarView = 'day';
vm.viewDate = moment().startOf('month').toDate();

vm.isCellOpen = true;

vm.toggle = function($event, field, event) {
  $event.preventDefault();
  $event.stopPropagation();
  event[field] = !event[field];
};

});
app.config(function(calendarConfig) {
  calendarConfig.dateFormatter = 'moment';
});

I want to be able to use two controllers, since I would like two versions of the same calendar on the same page, one showing a day view, the other a month view.

So I have this in my .html file

<html lang="fr" ng-app="Calendrier574">

And this on one of my div :

<md-content id="content" ng-controller="cal574 as vm" layout-padding flex>

But I keep getting the "Argument 'cal574' is not a function, got undefined". I went through the posts that have already been done on the subject but I couldn't find anything helpful.

If you need anything else please tell me.

I'm using angular 1.5.5 by the way.

EDIT : I created a jsfiddle, even so there are missing dependencies it might be of some help to have a better look at the code https://jsfiddle.net/zzddpk4v/#&togetherjs=s8M8Vir3rc

DOUBLE EDIT : Still looking for a solution, I'm working on cloud9 so if anyone wants to look at the whole code almost working, and try to edit it directly, you can go check it here https://ide.c9.io/millenium/back574upsidenav-cloned

CamilleSNCF
  • 39
  • 1
  • 8
  • have you tried to have a controller name without numbers in it? I know angular doesn't like special characters outside the english language. Maybe it's the same with numbers. – Stian Standahl Jun 03 '16 at 08:43
  • Can you create a jsfiddle ? – Sparw Jun 03 '16 at 08:46
  • @StianStandahl I changed the name for a name without number, now I'm getting another error, saying that there was an error loading a module. – CamilleSNCF Jun 03 '16 at 09:03
  • @Sparw I can, but my project as a few local dependencies. Since I'm working on a cloud IDE however I can give you the link to the project itself, even so it's quite messy so it might no be easy to find anuthing in it. – CamilleSNCF Jun 03 '16 at 09:04
  • It doesn't look like you're injecting the dependencies in the controller. Are these injected outside of the code you're showing us? – rrd Jun 03 '16 at 09:06
  • @rrd I don't think so. This is the only js file where I'm calling them. – CamilleSNCF Jun 03 '16 at 09:16
  • @CamilleSNCF: Check whether the name you are using in routeProvider controller is same as the name in controller – Thalaivar Jun 03 '16 at 09:40
  • That might be where the error is comming from, since I've not used routeProvider, nor changed it. – CamilleSNCF Jun 03 '16 at 09:45

3 Answers3

1

Have you included all the related .js files in your project/html. 

  <script src="../path to controller/controller.js"></script>

I got the same error when i forgot to include .js file.

Swati Maheshwari
  • 85
  • 2
  • 14
0

You need to wrap your controller in a function :

(function() {
    'use strict';
    // your controller code here
})();
Tom Shen
  • 1,045
  • 3
  • 11
  • 29
0

Trying changing this line:

app.controller("cal574", function(moment, alert, $timeout, $log) {

To:

app.controller("cal574", ['moment', 'alert', '$timeout', '$log', function(moment, alert, $timeout, $log) {

Then add in the corresponding extra ] at the end of the controller.

rrd
  • 5,789
  • 3
  • 28
  • 36