2013-08-19 58 views
0

我正在構建一個相當簡單的演示角度和應用程序有什麼等同於主屏幕和菜單,類似於橫向模式的平板電腦應用程序,有一個始終可見的屏幕左側的菜單以及右側的主要內容。簡單的點擊事件在角度之間切換兩種狀態

菜單和主內容頁面都有自己的控制器。

我試圖讓它可以展開菜單,並將其重新摺疊回20%的寬度,同時保持主頁面在視圖中。

我的問題是創建一個控制器,它將菜單和主頁保存爲項目,然後試圖將菜單和main_page控制器嵌套在該最高級別控制器中似乎過分。

至於我有現在的問題是

 
<body ng-controller="ViewCtrl"> 
    <div id="menu" ng-controller="MenuCtrl" > 
     <div ng-click="toggleMenu($event)" > open menu </div> 
     // all my ng-repeats for menu page content 
    </div> 
    <div id="main" ng-controller="MainCtrl"> 
     //all my ng-repeats for the main page content 
    </div> 
<body> 

在我ViewCtrl

,我有

 
function ViewCtrl($scope) { 
    $scope.toggleMenu = function($event){ 
     alert('clicked') 
    } 
} 

的問題是,我想我需要一種方法來檢查,如果菜單打開,如果是,關閉它,否則打​​開它。當菜單打開和關閉時,我必須在MenuCtrl和MainCtrl上設置類,並且我希望能夠通過在MainCtrl中單擊來關閉菜單。

什麼是角度處理這種最好的方法。

有沒有辦法在父級上設置一個類,如果是的話,我可以做到這一點?或者在當前控制器中獲取任何div,即使div不是由角度模型創建的?還是我以某種方式將現有的div與控制器相關聯?

這些解決方案中的大多數都顯得相當混亂。

+2

你可以提供jsfiddle –

+0

相同的想法,現在看不到問題 –

回答

2

問題是我想我需要一種方法來檢查菜單是否打開,如果是,關閉它,否則打​​開它。當菜單打開和關閉時,我必須在MenuCtrl和MainCtrl上設置類,並且我希望能夠通過在MainCtrl中單擊來關閉菜單。

有兩種方法可以完成此操作。

  1. 可以觸發該MainCtrl定製angular events並在MenuCtrl聽他們。

  2. 您可以在父範圍上設置一個標誌(模型)(碰巧是ViewCtrl)。

注意:您不應該從控制器修改DOM元素的類。指令應該用於此。

+0

我不確定你給的解決方案是我用過的,我最終用的是在我的ViewCtrl中,我設置了一個$ scope.ActiveView和$ scope.toggleActive()函數,它改變了activeView的值。然後,在我的身體標記上,我設置了'ng-class =「{menu:activeView =='menu'}」'這是你的意思#2?只是讓我的頭在如何在Angular中處理這些事情。 – pedalpete

+0

是的,你可以做到這一點,或者只是在ViewCtrl上設置一個模型,並將其設置爲來自兩個子控制器/模板的不同值。這是完全一樣的。 – 0xc0de