Jquery masonary & angularjs

integrate jquery masonary and angularjs, work with angularjs 1.0.1

by roychoo

HTML

<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
<script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<div ng:app="test">
 <div ng-controller="Ctrl2">
     <my-directive></my-directive>
 </div>
</div>
<span style="color: red" id="output">Out</span>

CSS

#container {
    border: 2px solid;
    padding: 5px;
}

.item {
    float: left;
    background: #49F;
    margin: 5px;
}

.w1 { width: 50px; }
.h1 { height: 50px; }
.w2 { width: 110px; }
.h2 { height: 110px; }

JavaScript

function Ctrl2($scope) {
        $scope.styleClasses= [
        {style: 'item w1 h1'},
        {style: 'item w1 h2'},
        {style: 'item w2 h1'},
        {style: 'item w1 h2'},
        {style: 'item w1 h1'},
        {style: 'item w1 h1'},
        {style: 'item w2 h2'},
        {style: 'item w1 h1'},
        {style: 'item w1 h1'},
        {style: 'item w2 h1'},
        {style: 'item w1 h2'},
        {style: 'item w1 h1'},
        {style: 'item w2 h1'},
        {style: 'item w1 h2'}
  ];
}
angular.module('test', []).directive("myDirective", function() {
    return {
        restrict: 'E',
        replace: true,
        scope: true,
        template: '<div id="container"><div check-last ng-repeat="res in styleClasses" class={{res.style}}>{{res.style}}</div></div>'
    };
})
     .directive('checkLast', function () {
        return function (scope, element, attrs) {
            //console.log(scope.$position);
            if (scope.$last=== true) {
                element.ready(function () {
                    $('#container').masonry({ columnWidth: 60});
                    
                })
            }
        }
    });