2014-01-24 68 views
2

我有麻煩了解如何ui路由器的工作原理。試圖添加一個導航到我的應用程序,顯示/隱藏點擊按鈕時。AngularJS ui路由器條件導航

.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

我相信你的問題與Javascript中固有的原型繼承有關,適用於$rootScope對象。你可能會做的是在模塊的run方法中創建一個對象,然後將所有的標誌設置爲該對象的屬性。由於這些屬性現在存儲在一個對象上,而不是基於$rootScope上的基元,因此當各種控制器從$rootScope製作原型時,它們通過引用而不是按值複製標誌,並且在一個控制器中更改它們會影響由另一個控制器運行的模板的顯示。我也會使用ng-show指令而不是ng-if。這是對DOM更高效的操作,因爲它只是添加display:none樣式,而不是刪除或添加整個DOM樹。