Add support for unpacking packery object and emit packery instance with its hash.

[tshi0912]

Firstly, It's a great angular module which can fulfill the packery packing functions in angular fashion.
However, when using this module, I find some defects:

1. Can not remove packery item when the relative data object deleted from collection. We often change our data model collection, say, add data items or remove data items, and angular will adjust the DOM nodes correspondingly. As you known, even if DOM nodes removed, the packery will keep them in the layout until we manually call packery.remove() function or packery.reloadItems() before packery.layout().
2. $emit "packeryInstantiated" without hash to identify with which $scope this instance should be associated. I think the purpose you $emit "packeryInstantiated" event is giving outer $scope a chance to capture the packery instance for later using, say, invoking packery.layout() to re-layout as necessary. However if the app have multiple packery instances, the outer scope can not identify which $scope it should associated in the event handler. To resolve the issue, we can bind a predefined hash to the "packery" directive, and once the $rootScope capture the "packeryInstantiated" event, the outer $scope can measure whether this instance is the associated one.

[tshi0912]

Hi buddy, I've create a pull request for these fix:
#35

[joshuahiggins]

We certainly have a need for unpacking / destroying individual objects. Thanks for your help on that.

As for the second part, the emitted "packeryInstantiated" event was used in an earlier build, but was left in after a rewrite in order to provide the Packery object, as you have identified. The Packery object is also attached to each Packery container element and can be referenced via angular.element('whatevercontainer').data('Packery'). The "hash" is only necessary internally so the service has a unique ID to associate with each Packery instance.

I'm not sure I understand the need for being able to pass in a unique ID via an attribute? A simple ID attribute can be added to the main Packery element and should transclude, allowing you to uniquely identify each instance within your app and access via the data method.

[tshi0912]

angular.element('whatevercontainer').data('Packery') is the directly DOM operation, which is also not suggested to be used in controller directly, however in the most cases, we need do call packery.layout on a controller after a data binding occurs, so we hold the instance via $scope should be more reasonable.

[rhclayto]

You mention: 'The Packery object is also attached to each Packery container element and can be referenced via angular.element('whatevercontainer').data('Packery')'.

However, I can't seem to get this to work. In my controller I do:

var logme = angular.element('#packeryContainer').data('Packery');
console.log(logme);

#packeryContainer is the ID of my packery container div (the div with attribute 'packery' on it). I get back an object of the element but I can't find Packery anywhere within it. Any ideas?

[codytodonnell]

@rhclayto I was encountering the same issue and fixed it by wrapping everything in a $timeout:

$timeout(function() {
var logme = angular.element('#packeryContainer').data('Packery');
console.log(logme);
});