Question

我正在使用角度种子项目作为基础的Play框架项目。它创建了一个控制器数组，并将它们传递给angularjs实例，我猜，与我见过的其他教程有些不同。当我尝试将div链接到控制器时，找不到控制器功能：

angular.js:13920 Error: [ng:areq] Argument 'menuCtrl' is not a function, got undefined

以下是我在控制器中的链接方式：

<div id="wrapper" class="row row-offcanvas row-offcanvas-left" ng-controller="menuCtrl" uib-collapse="showMenu" horizontal>

      <div id="sidebar-wrapper" class="col-xs-6 col-sm-3 sidebar-offcanvas" ng-show="menuOpen" role="navigation">

        <ul class="nav nav-pills nav-stacked">
            <li><a href="#/view1">view1</a></li>
            <li><a href="#/view2">view2</a></li>
        </ul>

      </div>

      <div id="page-content-wrapper" class="col-xs-12 col-sm-9">

        <div ng-view></div>

        <div>Angular seed app: v<span app-version></span></div>

      </div>

  </div>

这是main.js：

/*global require, requirejs */

'use strict';

requirejs.config({
  paths: {
    'angular': ['../lib/angularjs/angular'],
    'angular-route': ['../lib/angularjs/angular-route'],
    'ui-bootstrap':['../lib/angular-ui-bootstrap/ui-bootstrap']
  },
  shim: {
    'angular': {
      exports : 'angular'
    },
    'angular-route': {
      deps: ['angular'],
      exports : 'angular'
    },
      'ui-bootstrap': {
          deps: ['angular'],
          exports: 'ui-bootstrap'
      }
  }
});

require(['angular', './controllers', './directives', './filters', './services', 'angular-route', "ui-bootstrap"],
  function(angular, controllers) {

    // Declare app level module which depends on filters, and services

    angular.module('eprogram2', ['eprogram2.filters', 'eprogram2.services', 'eprogram2.directives', 'ngRoute']).
      config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: controllers.MyCtrl1});
        $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: controllers.MyCtrl2});
        $routeProvider.otherwise({redirectTo: '/view1'});
      }]);

    angular.module('eprogram2', ['ui.bootstrap']);

    angular.bootstrap(document, ['eprogram2']);


  });

和controller.js：

'use strict';

define(function() {

    /* Controllers */

    var controllers = {};

    controllers.MyCtrl1 = function() {}
    controllers.MyCtrl1.$inject = [];

    controllers.MyCtrl2 = function() {}
    controllers.MyCtrl2.$inject = [];

    controllers.menuCtrl = function($scope, $window) {
        $scope.menuOpen = false;

        console.log("MenuCtrl");

        // Detect if mobile portrait screen size
        $scope.is_mobile = ($window.innerWidth <= 480);

        if ($scope.isMobile) {
            $scope.menuOpen = false;
            console.log("mobile detected - close menu")
        } else {
            $scope.menuOpen = true;
            console.log("not mobile - open menu")
        }

    }
    controllers.menuCtrl.$inject = ['$scope', '$window'];

    return controllers;

});

我尝试过使用模板项目的控制器和我的控制器，但没有去。路由指令在main.js中找到它们的控制器没有问题，但控制器似乎没有暴露给HTML页面。我试过了：

eprogram2.controllers.menuCtrl controllers.menuCtrl eprogram2.menuCtrl

格式也是如此，但都返回相同而不是函数，得到未定义的消息。关于我的骨头错误是什么的任何建议？

Answer 1

您有module('eprogram2')的2个声明。

您只能声明一次模块。

卸下：

angular.module('eprogram2', ['ui.bootstrap']);

并将'ui.bootstrap'依赖项添加到初始声明中。

在旁注中看起来你正在使用的种子相当陈旧。我建议遵循John Papa's style guide和规则1 ，并为每个文件分配一个组件。从长远来看，你会很感激。

将控制器模块和指令分组为指令模块的想法早已被取代，将功能分组到模块中。它们以这种方式变得更加便携

无法从HTML查找控制器

1 个答案: