Sean Sylvester Sean Sylvester - 6 months ago 19
jQuery Question

Jquery and Angularjs

So I'm trying to collapse a sidebar which I have stored as an angular element. I've tried using the toggle script in the template URL and in my page code but neither are doing it. On every other page of the site, I still have the sidebar in non-angular form and it is collapsing without a problem.

heres the problem

plunkr

<div ng-app="appHeaderApp">
<div ng-controller="sidebarcon">
<div ng-repeat="stab in mySideTabs">
<app-sidebar info="stab"></app-sidebar>
</div>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</div>

Answer

The short answer for this is that you are not using Angular correctly. If you're using Angular, do things the Angular way :)

After inspecting your website, it looks like you are using a directive for the sidebar. The collapsing functionality is being controlled by the "toggled" class, so we can use ng-class to toggle this.

So we can do something like: <div ng-class="{toggled: toggled}"></div>

This conditionally applies a class. Then in your button that toggles the sidebar, you can do something like: <button ng-click="toggled = !toggled">Toggle Sidebar</button>

This button will toggled the "toggled" boolean back and forth, which will toggle the class on the sidebar.

Comments