JSFiddle - React, Tailwind, and code Playground

by terebentina

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<div ng-app="test" ng-controller="MainCtrl">
    <raph:page ng-repeat="page in pages" width="{{page.width}}" height="{{page.height}}"></raph:page>
</div>

CSS

.page {
    background: #0f0;
}

JavaScript

angular.module('test', [])
    .controller('MainCtrl', function($scope) {
        $scope.pages = [
            {width: 50, height: 100},
            {width: 100, height: 50}
        ];
    })
    .directive('raphPage', function() {
        return {
            restrict: 'E',
            replace: true,
            scope: true,
            template: '<div class="page"></div>',
            link: function(scope, element, $attrs) {
                console.log('wh: ', $attrs, $attrs.width, $attrs.height);
                scope.svg = Raphael(element, $attrs.width, $attrs.height);
            }
        }
    });