jquery tree() doesn't work with angular with ng-repeat

[ron23]

Hi, It's probably more question than an issue and I hope someone with a bit knowledge with angular could give me his insight. I have angular directive that's responsible for creating a tree-menu in the sidebar. It uses ng-repeat to create the tree structure. But since the tree(",sidebar") function runs before it's being constructed (a special button has to be pressed in order to get the items in the tree) - the tree slide actions doesn't work. When I call manually from the console to the tree(".sidebar") function - the first level is working fine. However the second level doesn't work. The tree-menu just won't open. When I call the tree() function again - it's working again.

Now, another issue from this horrible situation is that the tree structure can change again (and again and again...) when pressing on a certain button. So, I need the tree to work no matter what changes had happen to the structure.

Any ideas on how to make it work? Thanks!

[almasaeed2010]

Unfortunately, I have no experience with AngularJS. I will leave this open in hopes that someone can help.

[Seiifer]

@ron23

Did you manage to find something ? Is your issue similar to mine ?

My menu is made but when I click on its elements, it doesn't drop down.

I have something like this :

<li class="treeview" ng-repeat="IS in ISList"><a href="javascript:void(0)"> <i class="fa fa-folder"></i>{{IS}} <i class="fa fa-angle-left pull-right"></i></a>
            <ul class="treeview-menu">

              <li class="treeview"><a href="javascript:void(0)"> <i class="fa fa-folder"></i>Processus<i class="fa fa-angle-left pull-right"></i></a>
                <ul class="treeview-menu">
                  <li class="treeview" ng-repeat="mProcess in macroProcessList"><a href="javascript:void(0)"><i class="fa fa-folder"></i>{{mProcess}}<i class="fa fa-angle-left pull-right"></i></a>
                    <ul class="treeview-menu">
                      <li ng-repeat="carto in cartoList" ng-if="carto.type == 'AM' && carto.macroProcess == mProcess && carto.informationSystem == IS"><a href="javascript:void(0)" ng-click="changeSVG('carto.fileName')"><i class="fa fa-sitemap"></i>{{carto.displayName}}</a></li>
                    </ul>
                  </li>
                </ul>
              </li>

              <!-- Other <li> will come here -->

            </ul>
  </li>

If I remove the treeview and treeview-menu class, the list is displayed properly but with the wrong styles.

[ron23]

Yes What I did is copied the code of the dropdown click from the adminLTE.js , and used angular to manage the click. I used ng-click on the a tag, which runs this function. The only difference I did in the function is: scope.toggleMenu = function (element) { var elem = angular.element(e.currentTarget); var $this = elem ; var checkElement = $this.next(); ...} and in the html <a ng-click="toggleMenu($event)"

[lenin87]

tree view not working in angularjs i am trying to integreate tree menu in angularjs..... tree structure not working... when i remove angularjs code and plase a static content.... its work fine... here is my code.... what i observed is in angularjs tree css class are not loading

<ul class="sidebar-menu">
        <li class="header">MAIN NAVIGATION</li>
        <li class="active treeview">
          <a href="<?php echo base_url();?>welcome"><i class="fa fa-dashboard"></i> <span>Dashboard</span> </a>

        </li>

        <li class="treeview" ng-repeat="priv in privilege">
          <a href="javascript:void(0)">
            <i class="fa  fa-bus"></i><span>{{priv.name}}</span>
           <i class="fa fa-angle-left pull-right"></i>
          </a>
             <ul class="treeview-menu">
             <li ng-repeat="child in priv.feature">  <a href="{{child.url}}"><i class="fa fa-circle-o"></i>{{child.name}} </a></li>
          </ul>
        </li>