php - 错误 : [ng:areq] Argument 'SidebarController' is not a function, 未定义

Question

我的演示有两个问题:

错误:[ng:areq] 参数 'SidebarController' 不是函数，未定义 http://errors.angularjs.org/1.2.26/ng/areq?p0=SidebarController&p1=not%20aNaNunction%2C%20got%20undefined

目前，当我点击“instalaciones”或“Matrices”时，它会打开或关闭那个单独的菜单。

但是，我希望它打开点击的元素但关闭所有其他打开的元素。

我的 html 是:

<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>

我的 Angularjs 是:

/* 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');
                        });
                }
        };
    });
}())

我的 CSS 是:

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;
}

你能帮我找出问题所在吗？

Answer 1

这会将应用程序的根元素分配给 div 元素

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

相反，您需要将应用程序的根元素分配给您在 js 中定义的“app”模块，如下所示:

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