오류 : [NG : AREQ] 인수 'SidebarController은'내 데모 두 가지 문제가

Question

, 정의되지 않은있어 함수되지 않습니다 :

오류 : [NG : AREQ] 인수 'SidebarController'는 함수가 아닙니다, 얻었다 정의되지 않음 http://errors.angularjs.org/1.2.26/ng/areq?p0=SidebarController&p1=not%20aNaNunction%2C%20got%20undefined

그리고 현재 "instalaciones"또는 "매트릭스"를 클릭하면 해당 개별 메뉴가 열리거나 닫힙니다.

그러나 클릭 한 항목을 열고 다른 모든 미결 항목을 닫으시기 바랍니다.

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

은 다음과 같습니다 :

내 HTML은

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

이 당신이 이런 식으로, 당신은 당신의 js에 정의 된 "응용 프로그램"모듈에 응용 프로그램의 루트 요소를 할당 할 것이다

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

대신 div 요소로 응용 프로그램의 루트 요소를 지정합니다 :

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

Answer 2

어떻게하면 2 개의 컨트롤 중 1 개를 누르면 "표시"와 함께있는 것을보고 모두 닫을 수 있습니까?

내가 원하는 (누른)