2

我正在使用 AngularJS 和 requireJS，我正在使用这个种子模板来帮助我让 Angular 与 requireJS 很好地结合在一起，可以在这里找到LINK

目前，我正在尝试将 AngularUI 的日历集成到项目中，但是"Cannot call method 'map' of undefined"当日历代码位于calendarCtrl.js中且范围注入此控制器时，我不断收到错误消息。但是，当我将代码直接放在控制器（controllers.js）中时，日历可以工作。

Plunkr 链接：LINK

4

1 回答 1

2

在角度上，所有范围控件的内部注入器都由应用程序初始化。您设法将您的应用程序与控制器定义分离，因此 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) {
 ...

此版本的工作 plunker 在http://plnkr.co/edit/Xo41pqEdmB9uCUsEEzHe?p=preview。

于 2013-06-01T20:13:51.150 回答