simple on-click event in angular to switch between two states

Question

I'm building a fairly simple demo in angular and the app has what equates to a main screen and a menu, similar to a landscape mode tablet app where there is a menu on the left of the screen which is always visible, and the main content on the right.

Both the menu and the main content page have their own controllers.

I'm trying to make it so that I can expand the menu out, and collapse it back to 20% width again, while keeping the main page in view.

My problem is that it seems like overkill to create a controller which holds the menu and main page as items, and then to try to nest the menu and main_page controllers within that top level controller.

As far as I've got right now is

<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>

in my ViewCtrl, I have

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

The problem is that I think I need a way to check if the menu is open, and if so, close it, or else, open it. I've got to set classes on both the MenuCtrl and the MainCtrl for when the menu is opened and closed, and I'd like to be able to close the menu from a click within the MainCtrl.

What is the best way to handle this with angular.

Is there a way to set a class on a parent, if so, I would could do that? Or get any div within the current controller, even if the div isn't created by an angular model? Or do I somehow associate existing divs to the controller?

Most of these sorts of solutions seem quite messy.

0xc0de 0xc0de · Accepted Answer · 2013-08-19T12:12:07

The problem is that I think I need a way to check if the menu is open, and if so, close it, or else, open it. I've got to set classes on both the MenuCtrl and the MainCtrl for when the menu is opened and closed, and I'd like to be able to close the menu from a click within the MainCtrl.

There are two ways you can accomplish this.

You can trigger custom angular events in the MainCtrl and listen for them in the MenuCtrl.
You can set a flag(model) on the parent scope (which happens to be ViewCtrl).

Note: You shouldn't modify classes of a DOM element from a controller. Directives should be used for this.

simple on-click event in angular to switch between two states

1 Answers