Updating ng-repeat scope removes unexpected items not in ng-repeat

Question

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

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](http://stackoverflow.com/a/15012542/968155) for more reference. — New Dev, Dec 09 '14 at 00: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? — Coding Friend, Dec 09 '14 at 04:05
Look into using [Angular-ui-sortable](https://github.com/angular-ui/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, Dec 09 '14 at 05:26

score 0 · Accepted Answer · answered Dec 09 '14 at 09:05

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.

answered Dec 09 '14 at 09:05

RubaXa

266
1
6

Thanks! That seems the most obvious choice! Actually I have a favor to ask. I have the code base for my CMS on github https://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! – Coding Friend Dec 10 '14 at 04: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! – Coding Friend Dec 10 '14 at 07:38

Updating ng-repeat scope removes unexpected items not in ng-repeat

1 Answers1