2

I'm using AngularJS and requireJS and I'm using this seed template to help me to get Angular to place nicely with requireJS which can be found here LINK

At the moment I'm trying to integrate AngularUI's calendar into the project but I keep recieving the error "Cannot call method 'map' of undefined" when the calendar code is in calendarCtrl.js with the scope injected into this controller. However when I place the code directly in the controller (controllers.js) the calendar works.

Plunkr link: LINK

Malcr001
  • 8,179
  • 9
  • 44
  • 57
  • Do you have a version of the plunker that is what you'd like to have work but isn't? It would be much easier to help you debug from that version. – Paul Ryan Jun 01 '13 at 03:47
  • The code that doesnt work was already in there but commented out. I've edited so that it just includes the code that doesnt work. The main pages to focus on is controllers.js and calendarCtrl.js. – Malcr001 Jun 01 '13 at 10:31

1 Answers1

2

In angular the internal injectors for all of the scope controls are initialized by the app. You managed to detach your app from your controller definition so angular didn't know how to inject the pieces needed for the use of the $scope object.

Option 1

So to get this to work so you need to either define an app/module that get's passed into the space where the control is defined:

define(['angular'], function (angular) {
  'use strict';

    return angular.module('TP.controllers', []);
});

calendar control:

define([
    "jquery",
    "controllers",
        "jqueryui",
        "full_calendar",
        "calendar",
    ], 
    function($, controllers) {
        return controllers
      .controller('calendarCtrl', ['$scope', function($scope) {
....

In which case you'd have to include every individual controller in your top level application like:

define([
    'angular',
        'controllers',
    'calendarCtrl',
        'full_calendar',
        'calendar'
    ], function (angular, controllers) {
        'use strict';

        return angular.module('TP', ['TP.controllers', 'ui.calendar']);
});

Which to some degree defeats the purpose of using AMD.

Option 2

A better option is to define your calendar as it's own module then define it as a child of controllers. This maintains the angular injection chain so the scope has the proper context when initializing the calendar actions.

Defining the controllers root:

define(['angular', 'calendarCtrl'], function (angular) {
  'use strict';

    return angular.module('TP.controllers', ['calendarCtrl']);
});

Defining the calendar controller:

define([
    "jquery",
    "angular",
        "jqueryui",
        "full_calendar",
        "calendar",
    ], 
    function($, angular) {
      return angular.module('calendarCtrl', [])
          .controller('calendarCtrl', ['$scope', function($scope) {
 ...

Working plunker of this version at http://plnkr.co/edit/Xo41pqEdmB9uCUsEEzHe?p=preview.

Paul Ryan
  • 1,509
  • 12
  • 26
  • Apologies for not getting back to you sooner your help is much appreciated. When I integrate this into my project it does not work. In the next day or two I will try to get a version displaying the error soon on plunkr. – Malcr001 Jun 03 '13 at 22:25
  • Thank you for helping me. The problem I had implementing this into my project was to do with a conflict from an existing angular UI library I had in the project. I removed that and its working. Now I just need to figure out how to update the parent controllers variable from the calendar controller because this calendar is supposed to be apart of a form.. have any ideas? – Malcr001 Jun 04 '13 at 22:29
  • You can pass in an area of control from the parent you'd like to modify using the scope '=' operator `scope: { parentVar: '=' }. Then in your calendar controller you just update `scope.parentVar.value1 = 'some value'`, this will then reflect to the item you passed in from your directive. An example of this is at http://stackoverflow.com/questions/14219770/in-an-angularjs-directive-how-do-i-set-a-parent-controllers-property. – Paul Ryan Jun 04 '13 at 22:45