render widgets(with gridster)

by Anton Repjov

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.1.0/jquery.gridster.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.gridster/0.1.0/jquery.gridster.min.css">
<div class="page-wrapper" ng-controller="mainCtrl">
    <div class="widget">
        <h3>widgets</h3>
    </div>
    <div class="page">
        <h3>Page</h3>
        <ul class="gridster">
            <div proxy="widget" proxy-value="{{widget}}" ng-repeat="widget in widgets"></div>         
        </ul>
</div>

CSS

.widget {
    float: left;
    width: 20%;
    background: #c1c1c1;
}

li.preview-holder {
    background: #55ECA4 !important;
    border: 2px dashed !important;
    color: #5CB10F !important;
    height: 100px !important;
}
.page {
    float: left;
    width:80%;
}
li {
    list-style:none;
    border: 1px solid;
    
}

JavaScript

var app = angular.module('app',[]);

app.controller('mainCtrl', ['$scope', '$q', 'widgetAPI', function($scope, $q, widgetAPI) {
    $scope.widgets = [];
    widgetAPI.get().then(
        function(data) {
            $scope.widgets = data;
        },
        function(err) {
            console.log("error", err);
        }
    );
}])

//Our service
.service('widgetAPI', ['$q', function($q) {
    var api = {};
    api.get = function() {
        //here will be $http in real app
        return $q.when(
            [
                {
                    component: 'wgtitle',
                    title: "Hello world",
                    color: '#DB1F1F',
                    backgroundColor: '#c1c1c1',
                    fontSize: '16px'
                },
                {
                    component: 'wgimage',
                    src: "http://cs425622.vk.me/v425622209/79c5/JgEUtAic8QA.jpg",
                    width: '100px'
                },
                 {
                    component: 'wgimage',
                    src: "http://cs425622.vk.me/v425622209/79cf/S5F71ZMh8d0.jpg",
                    width: '100px'
                }
                
            ]
        );
    };
    return api;
}])

//stole from internet and a bit changed for our needs
.directive('proxy', ['$parse', '$injector', '$compile', function ($parse, $injector, $compile) {
    return {
        replace: true,
        link: function (scope, element, attrs) {
            var nameGetter = $parse(attrs.proxy);
            var name = nameGetter(scope);
            var value = undefined;
            if (attrs.proxyValue) {
              var valueGetter = $parse(attrs.proxyValue);
              value = valueGetter(scope);
            }
    
            var directive = $injector.get(name.component + 'Directive')[0];
            if (value !== undefined) {
                attrs[name.component] = value;
            }
            var a = $compile(directive.template)(scope);
           ...