javascript - 可折叠菜单不起作用 - 参数 'SidebarController' 不是函数，未定义

Question

我正在用 Angular 制作一个可折叠菜单，但它似乎破坏了我网页的其余部分!我已将其隔离在我的 app.js 中的某个位置文件，它控制着一切。我收到标题中所述的错误:

Error: [ng:areq] Argument 'SidebarController' is not a function, got undefined.

'use strict';

(function() {

// Declare app level module which depends on views and components
angular.module('app', [
  'ngRoute',
  'app.view1',
  'app.view2',
  'app.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);

//Sidebar toggle
app.controller('SidebarController', function($scope) {

$scope.state = false;

$scope.toggleState = function() {
    $scope.state = !$scope.state;
};

});

app.directive('sidebarDirective', function() {
return {
    link : function(scope, element, attr) {
        scope.$watch(attr.sidebarDirective, function(newVal) {
              if(newVal)
              {
                element.addClass('show');
                return;
              }
              element.removeClass('show');
        });
      }
   };
});

}())

这是相关的 <div>包含侧边栏:

<div id="page-wrapper" ng-class="" ng-cloak>
    <div id="sidebar-wrapper" ng-controller="SidebarController" class="sidebar" sidebar-directive="state">
      <a id="navigation-toggle" ng-click="toggleState()">MENU</a>
      <ul class="navigation">
        <li class="navigation-items">
          <a href="#/view1">Denon Settings</a>
        </li>
        <li class="navigation-items">
          <a href="#/view2">Light Settings</a>
        </li>
      </ul>
    </div>

发生什么事了？

Answer 1

我明白了!问题是我没有正确定义app。声明应为:

// Declare app level module which depends on views and components
var app = angular.module('app', [
  'ngRoute',
  'app.view1',
  'app.view2',
  'app.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);