0

Why is my sortable angular ng-repeat menu deleting everything after the sorted menu item? https://github.com/RubaXa/Sortable/tree/dev I am using RubaXa's Sortable library with angular to make a sortable menu system for a custom CMS. When the menu gets sorted I have a this code loop through all menu items, record their location and update the $scope.menus.

            var menus = {};
            jQuery('.mb-draggable').has('a[href!="#"]').each(function(i, menuItem) {
                var location = jQuery(menuItem).parent('[data-menu]').data('menu');
                var position = jQuery('[data-menu="' + location + '"]').children('.mb-draggable').has('a[href!="#"]').index(jQuery(menuItem));  
                var id = jQuery(menuItem).data('id');

                //findMenuById finds the index and data of the menu item that has a matching id
                var found = theme.findMenuById($scope.menus, id);
                var newData = found.data;
                newData.location = location;
                newData.position = position;
                if(!menus[location]) {
                    menus[location] = [];
                }
                menus[location][position] = newData;
            });
            $scope.menus = menus;
            console.log('$scope.menus', $scope.menus);
            $scope.$apply();

$scope.menus has two different properties .main and .footer and each of these holds an array of menu list items. When I make $scope.menus = menus the $scope.menus is correct but the view suddenly gets rid of the footer menu and the editing buttons, which are not within ng-repeat. Here is the jade for the menu.

#navbar.navbar-collapse.collapse
        ul#sortable-head.nav.navbar-nav(data-menu="main")
            li(ng-repeat="menu in menus.main" class="mb-draggable {{menu.classes}}" ng-class="active(menu.url)" data-id="{{menu.id}}")
                a(href="{{menu.url ? menu.url : /}}" target="{{menu.target}}").mb-editable.mb-main-list-a {{menu.title}}
            li.drop-down
                a(data-toggle="dropdown" href="#").dropdown-toggle 
                    | Blog
                    span.caret
                ul#sortable-footer.dropdown-menu(role="menu" data-menu="footer")
                    li(ng-repeat="menu in menus.footer" data-id="{{menu.id}}").mb-draggable
                        a(href="{{menu.url ? menu.url: /}}" target="{{menu.target}}").mb-editable.mb-footer-list-a {{menu.title}}

The editing buttons are added on with jQuery

jQuery('[data-menu]').append($compile('<li data-toggle="modal" data-target="#editMenuItemModal" ng-click="selectedMenu($event)" class="mb-edit-menu-item"><a href="#"> <i class="fa fa-pencil fa-lg"></i></a></li>')($scope));
3
  • 1
    Honestly, this is the kind of question that makes me want to just skip it. You clearly understand some tools in Angular (hence the use of $compile), but you are not following best practices at all, so it's no surprise that you're running into issues. Read this answer for more reference.
    – New Dev
    Commented Dec 9, 2014 at 0:42
  • Thanks for your input, this makes me want to completely restructure the way I'm doing things. Should I use this sortable library at all, since it does directly manipulate the dom? What is considered the best practice for adding the edit buttons while in edit mode? Commented Dec 9, 2014 at 4:05
  • Look into using Angular-ui-sortable. I don't know what specifically you mean by "edit buttons", but in general, think in terms of ViewModel - how should the ViewModel (i.e. $scope) change for various modes (independent of the DOM). Then the View should be driven off of the ViewModel with all the tools in Angular's toolbox (i.e. ng-model, ng-repeat, ng-if, expressions, etc...)
    – New Dev
    Commented Dec 9, 2014 at 5:26

1 Answer 1

0

Use ng-sortable.js

Docs: https://github.com/RubaXa/Sortable/tree/dev#support-angularjs

P.S. If something is not clear, create an example on jsbin.com I will try to help you.

2
  • Thanks! That seems the most obvious choice! Actually I have a favor to ask. I have the code base for my CMS on github github.com/codingfriend1/meanbase I'm wanting to follow best practices and make it modular so it will be easy for people to add onto it. If you guys want to take a look or ask a friend to I would love your critique of the code. I'm mostly concerned about the appCtrl.js file, but I would appreciate input everywhere. I'm kind of new to angular, and I'm not sure the best way to structure my code. If any tips on structure would be helpful! Commented Dec 10, 2014 at 4:57
  • Using ng-sortable fixed most all the angular issues I was having. It really means a lot that you guys took time to help out! Commented Dec 10, 2014 at 7:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.