2014-01-24 69 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树。