Календарь пользовательского интерфейса Angular не будет загружаться с введенного контроллера

Я использую AngularJS и requireJS, и я использую этот начальный шаблон, чтобы помочь мне заставить Angular красиво разместиться с requireJS, который можно найти здесь ССЫЛКА

На данный момент я пытаюсь интегрировать календарь AngularUI в проект, но я продолжаю получать сообщение об ошибке "Cannot call method 'map' of undefined", когда код календаря находится в calendarCtrl.js с областью действия, введенной в этот контроллер. Однако когда я помещаю код непосредственно в контроллер (controllers.js), календарь работает.

Ссылка на Plunkr: ССЫЛКА


person Malcr001    schedule 31.05.2013    source источник
comment
У вас есть версия плунжера, которую вы хотели бы иметь, но она не работает? Было бы намного проще помочь вам отлаживать эту версию.   -  person Paul Ryan    schedule 01.06.2013
comment
Код, который не работает, уже был там, но закомментирован. Я отредактировал так, что он просто включает код, который не работает. Основные страницы, на которых следует сосредоточиться, — это controllers.js и calendarCtrl.js.   -  person Malcr001    schedule 01.06.2013


Ответы (1)


В angular внутренние инжекторы для всех элементов управления прицелом инициализируются приложением. Вам удалось отсоединить ваше приложение от определения вашего контроллера, поэтому angular не знал, как внедрить части, необходимые для использования объекта $scope.

Опция 1

Итак, чтобы заставить это работать, вам нужно либо определить приложение/модуль, который передается в пространство, где определен элемент управления:

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

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

управление календарем:

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

В этом случае вам нужно будет включить каждый отдельный контроллер в приложение верхнего уровня, например:

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

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

Что в некоторой степени противоречит цели использования AMD.

Вариант 2

Лучшим вариантом является определение вашего календаря как собственного модуля, а затем определение его как дочернего элемента контроллеров. Это поддерживает цепочку угловых инъекций, поэтому область действия имеет правильный контекст при инициализации действий календаря.

Определение корня контроллера:

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

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

Определение контроллера календаря:

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

Рабочий плункер этой версии на http://plnkr.co/edit/Xo41pqEdmB9uCUsEEzHe?p=preview.

person Paul Ryan    schedule 01.06.2013
comment
Приносим извинения за то, что не свяжемся с вами раньше, ваша помощь очень ценится. Когда я интегрирую это в свой проект, это не работает. В ближайшие день или два я попытаюсь получить версию, отображающую ошибку, в ближайшее время на plunkr. - person Malcr001; 04.06.2013
comment
Спасибо за помощь мне. Проблема, с которой я столкнулся при реализации этого в своем проекте, заключалась в конфликте с существующей библиотекой пользовательского интерфейса angular, которая была у меня в проекте. Я удалил это, и это работает. Теперь мне просто нужно выяснить, как обновить переменную родительского контроллера из контроллера календаря, потому что этот календарь должен быть частью формы... есть какие-нибудь идеи? - person Malcr001; 05.06.2013