0

私はAngularでかなり単純なデモを構築しています.アプリにはメイン画面とメニューに相当するものがあり、画面の左側に常に表示されるメニューがあるランドスケープモードのタブレットアプリと同様です.右のコンテンツ。

メニューとメイン コンテンツ ページの両方に独自のコントローラーがあります。

メインページを表示したまま、メニューを展開して20％の幅に戻すことができるようにしようとしています.

私の問題は、メニューとメイン ページをアイテムとして保持するコントローラーを作成し、そのトップ レベル コントローラー内に menu と main_page コントローラーをネストしようとするのはやり過ぎのように思えることです。

私が今持っている限りでは

<body ng-controller="ViewCtrl">
   <div id="menu" ng-controller="MenuCtrl" >
       <div ng-click="toggleMenu($event)" > メニューを開く </div>
       // メニュー ページ コンテンツのすべての ng-repeat
   </div>
   <div id="main" ng-controller="MainCtrl">
       //メイン ページ コンテンツのすべての ng-repeat
   </div>
<本体>

私のViewCtrlでは、私は持っています

関数 ViewCtrl($scope) {
    $scope.toggleMenu = 関数($イベント){
        alert('クリック')
    }
}

問題は、メニューが開いているかどうかを確認し、開いている場合は閉じるか、開いているかどうかを確認する方法が必要だと思うことです。メニューを開いたり閉じたりするときに、MenuCtrl と MainCtrl の両方にクラスを設定する必要があり、MainCtrl 内をクリックしてメニューを閉じることができるようにしたいと考えています。

これをAngularで処理する最良の方法は何ですか。

親にクラスを設定する方法はありますか?もしそうなら、私はそれを行うことができますか? または、div が角度モデルによって作成されていなくても、現在のコントローラー内で div を取得しますか? または、何らかの方法で既存の div をコントローラーに関連付けますか?

これらの種類のソリューションのほとんどは、非常に面倒に見えます。

4

1 に答える 1

2

問題は、メニューが開いているかどうかを確認し、開いている場合は閉じるか、開いているかどうかを確認する方法が必要だと思うことです。メニューを開いたり閉じたりするときに、MenuCtrl と MainCtrl の両方にクラスを設定する必要があり、MainCtrl 内をクリックしてメニューを閉じることができるようにしたいと考えています。

これを行うには 2 つの方法があります。

  1. でカスタム角度イベントをトリガーし、MainCtrlでそれらをリッスンできますMenuCtrl。

  2. 親スコープ（たまたま）にフラグ（モデル）を設定できますViewCtrl。

注: コントローラから DOM 要素のクラスを変更しないでください。これにはディレクティブを使用する必要があります。

于 2013-08-19T12:12:07.853 に答える