错误：[ng：areq]参数'SidebarController'不是函数，未定义

Question

I have two problems with my demo:

Error: [ng:areq] Argument 'SidebarController' is not a function, got undefined http://errors.angularjs.org/1.2.26/ng/areq?p0=SidebarController&p1=not%20aNaNunction%2C%20got%20undefined

And, currently when I click on "instalaciones" or "Matrices" it opens or closes that individual menu.

However, I would like it to open the clicked item but close all other open items.

my html is:

<link href="modules/matrix/CSS/style.css" rel="stylesheet" />
<script src="modules/matrix/controllers/sidebarnav.js"></script>
<script src="bower_components/angular/angular.js" data-require="angular.js@1.3.15" data-semver="1.3.15"></script>

<div class="container" >
    <div class="row matrix-view">
        <div class="container-sidebar" ng-app>
            <div ng-controller="SidebarController">
                <div class="sidebarnav" sidebar-directive="state">
                    <a class="vertical-text" href="#" id="navigation-toggle"     ng-click="toggleState()">Instalaciones</a>
                <ul class="navigation">
                        <li>items</li>
                    </ul>
                </div>
            </div>
            <div ng-controller="SidebarController2">
                <div class="sidebarnav" sidebar-directive="state">
                    <a class="vertical-text" href="#" id="navigation-    toggle2" ng-click="toggleState()">Matrices</a>
                    <ul class="navigation">
                        <li>item</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-xs-9 grid">
            <grid></grid>
        </div>
    </div>
</div>

my Angularjs is:

/* global angular */
(function () {
    var app = angular.module('app',[]);
    app.controller('SidebarController', function ($scope){
        $scope.state = false;
        $scope.toggleState = function() {
                $scope.state = !$scope.state;
        };
    });
    app.controller('SidebarController2', 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');
                        });
                }
        };
    });
}())

and my css is:

body {
    font-family : arial;
}

.sidebarnav {
    position : absolute;
    top : 0;
    left : -160px;
    transition : 100ms left;
}

#navigation-toggle {
    position: absolute;
    left: 165px;
    margin-top: 5px;

}
#navigation-toggle2 {
    position: absolute;
    left: 165px;
    margin-top: 100px;
}

.show{
    left : 0;
}
.show a{
        left: 0px !important;
}
.show ul{
        left: 0px !important;
}

.navigation{
        list-style : none;
        padding : 0;
        margin : 0 0 0 20px;
}
.navigation-items{
    display : block;
    background-color : #e01212;
    color : white; 
    line-height : 2em;
    text-decoration : none;
    padding : 10px 30px;
    width : 100px;
}
.navigation-items a:hover{
    background-color : #222;
}

.vertical-text {
    display: inline-block;
    transform: rotate(90deg);
    transform-origin: left top 0;
    float: left;
    margin-left: 15px;
}

Can you please help me identify the problem?

Answer 1

This assigns the root element of the application to the div element

<div class="container-sidebar" ng-app>

Instead, you will want to assign the root element of the application to the "app" module you defined in your js, like this:

<div class="container-sidebar" ng-app="app">