UI router and binding not working?

[benlooi]

Hi, tried to navigate to another part of document from slide menu.

However the links are not working. It can work if it is not within the pageslide directive. Seems it is not

I tried opening with two methods.

   <a  class="btn btn-info pull-right" ng-click="checked=!checked">Open</a>
   <a  class="btn btn-info pull-right" pageslide  ps-side="right" ps-speed="1.0" href="#sidemenu" ps-auto-close>MENU</a>

Binding for href, and ui-sref does not work.

For a href, it does not bind with my $scope.loggeduser.usrID. When mouseover it shows the tooltip with url loggedin/posts/{{loggeduser.userID}} instead of a number like was supposed to. For UI sref it doesn't work.

<pageslide ps-open="checked" ps-target="#sidemenu"></pageslide> 
   <div id='sidemenu'>
    <a id="sidemenu-close" class="btn" >Close</a>
    <ul>
       <li> <a href='#/loggedin/posts/{{loggeduser.userID}}'>Home</a></li>
       <li class='dropdown'><a ui-sref='loggedin.create'>Create</a>
        <ul class='submenu-create'>
            <li class='dropdown'><a ui-sref='loggedin.addalbum' >Add new album</a></li>
           <li class='dropdown'>Playlist</li>
      > </ul>
    </li>
    <li class='dropdown'><a ui-sref='loggedin.create'>Discover</a>
        <ul class='submenu-create'>
            <li class='dropdown'>Artistes</li>
            <li class='dropdown'><a ui-sref='loggedin.users'>Users</a></li>
        </ul>
    </li>

    <li class='dropdown'><a ui-sref='loggedin.create'>Manage</a>
        <ul  class='submenu-create'>
            <li class='dropdown'><a ui-sref='loggedin.report' >Sales report</a></li>
            <li class='dropdown'>Rewards and Payments</li>
             <li class='dropdown'><a ui-sref='loggedin.profile' >Personal Details</a></li>
        </ul>
    </li>

  </ul>

[benlooi]

Hi all, just an update on getting a slide menu.

Ditched the directive approach because it is screwing up my scope when it is nested.

Here's what I did and it worked.

In CSS: I have an id called #sidemenu:

  #sidemenu {
padding:0px;

height:100%;

} Added 2 classes:

.hidemenu {
 position: absolute;
 right:0px;
width:300px;
background-color:gray;
opacity:0.9;
 transition: all 0.5s;

} Explanation: This is a class that puts the element off-screen. It has a width of 300px, which is used in the .showmenu positioning change.

.showmenu {
 position: absolute;
right:-300px;
width:300px;
display:block;
background-color:lightgray;
opacity:0.3;
transition: all 0.5s;

}

Explanation: When this class is added to the element with id #sidemenu, the following takes place: right: from 0 to -300px and vice versa opacity: from 0.8 to 0.3 and vice versa

----- in HTML, I used ng-class on element '#sidemenu'.

Whatever you want to show in your menu, including ui-sref and href links with $stateParams etc.

Explanation: So when $scope.checked is true, the class is set to hidemenu. When false, it is set to showmenu.

This is triggered by a button that toggles $scope.checked in your controller between true and false.

<a  class="btn btn-info pull-right" ng-click="checked=!checked">

Explanation: This button uses ng-click to toggle "checked" between true and false.

Hope this helps those who are looking for a simple way to implement slide menus. Why it works : It is straightforward as the divs are all on the page from the onset, so all your nested scope and controllers are all in place. Dynamically adding elements can be quite tricky, requiring transclude etc...and sometimes causes binding to break, like in my case. I think ng-pageslide is great...I learned alot from studying it. However it did not suit my needs, but the methods used in adding classes etc was something I adopted and now understand slide menu creation. Thanks for sharing.

[EngineeredTruth]

Benlooi, thanks for that solution. That looks like the easiest possible slidemenu, I understand the concept now.

Do you happen to know how to easily do the 'push' effect?