2014-01-24 4 views
2

ui-router의 작동 방식을 이해하는 데 어려움을 겪고 있습니다. 단추를 클릭하면 표시/숨기기 내 앱에 탐색을 추가하려고합니다.AngularJS ui-router 조건부 탐색

.state('now', { 
    url: '/now', 
    views: { 
    'content': { 
     templateUrl: 'views/now', 
     controller: 'MyCtrl' 
    }, 
    'navigation': { 
     templateUrl: 'views/navigation.html', 
     controller: 'NavigationCtrl' 
    } 
    } 
}) 

rootscope에서 변수를 시도했지만 항상 탐색을 표시합니다. class = "ng-hide"를 추가하면 탐색 기능이 표시되지 않습니다.

HTML은

<nav class="navbar navbar-default" role="navigation"> 
    ... 
     <a id="menu-button" ng-click="show_navigation=!show_navigation"><i class="icon-reorder icon-2x"></i></a> 
    ... 
</nav> 
<input type="checkbox" ng-checked="show_navigation" id="nav-handler"> 
<nav id="nav" ng-if="show_navigation" ui-view="navigation"></nav> 

나는 응용 프로그램 내의 모든 다른 뷰에서 렌더링 할 수있는 상태 자체 탐색을 정의 할 수 있습니까?

+0

컨텍스트 또는 구현 없이는 의미가없는 게시 된 코드에 많은 요소가 있으므로 문제를 나타내는 코드로 Plunker 또는 jsFiddle을 설정할 수 있습니까? – IvorG

답변

0

나는 $rootScope 개체에 적용된 Javascript의 고유 한 상속과 관련되어 있다고 생각합니다. 당신이 할 수있는 일은 모듈을위한 run 메쏘드에서 객체를 생성 한 다음 모든 플래그를 그 객체의 프라퍼티로 설정하는 것입니다. 이제 $rootScope에있는 프리미티브 대신 객체에 속성이 저장되므로 $rootScope에서 다양한 컨트롤러 프로토 타입을 만들 때 값 대신 참조로 플래그를 복사하고 한 컨트롤러에서 변경하면 다른 컨트롤러에서 실행되는 템플릿 표시에 영향을줍니다 . 또한 ng-if 대신 ng-show 지시문을 사용합니다. 전체 DOM 트리를 제거하거나 추가하지 않고 display:none 스타일 만 추가하기 때문에 DOM을보다 효율적으로 조작 할 수 있습니다.

관련 문제