groups idea

droppable_directive.html

<div ng-repeat="group in groups">
  <div data-group={{group.id}} group-droppable>{{group.name}}</div>
  <div ng-repeat="pak in paks" draggable>
     <!-- ... pak display -->
  </div>
</div>


<script>
<!-- angular directive boilerplate -->
directive('groupDroppable').link = function (scope, element, attr) {
  droppable.drop = function() {
    // all API communication with server happens in this function
    // NO UI updates happen in this function
    // It doesn't know anything about the UI or the state of any other pak
    // It only knows about it's own state and the only thing it can do is update it's own state server side
    scope.pak.addGroup(attr['data-group-id']);
  };
};

// "The directive registers an event handler of some sort in the DOM 
// "that will get a value from the DOM and apply it to the model in $scope."
//
// THIS IS ALL A DIRECTIVE SHOULD DO
// 
// http://www.benlesh.com/2013/08/angularjs-watch-digest-and-apply-oh-my.html


controller('ManageGroups') = function() {
    // a $watch function defined here in the controller watches
    // for any changes to any_pak.group
    // in response to a change it updates any UI elements appropriately
    // in case of ERROR: the pak.addGroup function $http error callback will JUST
    // change the group id of scope.pak BACK
    // the same $watch function will change the UI element back to what it was before
};
</html>

//
// Should anything pak (like $scope.paks[1]) encounter an API error response, 
// all it will do is update its internal state.
// There will be a $watch on pak.errors to update the UI, using the error state
// data (error_type, error_msg) stored there.
//
// "$watch is arguably the most important internal feature of Angular. "
// 
// 
// Now $digest IS SO FUCKING SIMPLE:
// 
// "At it's core, the important thing to know about $digest is that it loops
// through all watchers on the scope 
// it was called on and it's child scopes. and evaluates them to see
// if they've changed, executing their handlers
// if they have. That's the important part you need to know."
//
// IT ALL MAKES SENSE