Integrate paper.js into angular.js

Question

I have this problem with integrating paper.js into angular.js. My issue is that I simply doesn't know where to load the paperscript part.

I have a view and a controller and I can't really place the code in the controller for what I know and it wont load if it is placed in the view.

My controller look like this:

    var hash = window.location.hash.split('/');

$scope.status = 'Loading';
var request = jQuery.ajax(system.server, {
    'url': system.server,
    'headers': {
        'Accept': 'application/json',
        'Request': system.request + '/hcbs/allocations/resident/' + hash[3],
        'Username': system.username,
        'Password': system.password
    }
})
.always(function(response)
{
    signature.constructor();
    switch(response.status)
    {
        case 200:
        case undefined:
            $scope.$apply(function()
            {
                $scope.status = '';
                var res = JSON.parse(response);
                $scope.hcbsAllocations = res.hcbsServiceAllocations;

                $scope.change = function(allocationId)
                {
                    console.log(jQuery('[data='+ allocationId +'][name=startDate]').val());
                    console.log(jQuery('[data='+ allocationId +'][name=endDate]').val());
                }

                $scope.submit = function(allocationId)
                {
                    // Validate dates

                    // Make signature popup
                    $scope.signaturePop = true;
                }
            });
            break;
        case 404:
            console.log('error ' + response.status);
            $scope.$apply(function()
            {
                $scope.status = 'Problems loading ressource at the moment';
            });
        default:
            console.log(response);
    }
});

My view looks like this:

<div id="app-content">
    <div consumer />

    <h1>Consumer</h1>

    <div ng-show="status">
        <div class="notice">
            <p>{{status}}</p>
        </div>
    </div>

    <form name="attendance">
        <table class="hcbs">
            <tr ng-repeat="allocation in hcbsAllocations">
                <td class="first"><h3>{{allocation.type}}</h3></td>
                <td class="middle">
                        <input type="datetime-local" name="startDate" ng-model="startDate" ng-change="change(allocation.id)" data="{{allocation.id}}" placeholder="Choose start date" />

                        <input type="datetime-local" name="endDate" ng-model="endDate" ng-change="change(allocation.id)" data="{{allocation.id}}" placeholder="Choose end date" />
                </td>
                <td class="last">
                    <span class="btn" class="submit" data="{{allocation.id}}" ng-click="submit(allocation.id)"><i class="icon-ok icon-large"></i></span>
                </td>    
            </tr>
        </table>
    </form>
</div>

Answer 1

The directive approach to this:

Check out the jsFiddle

HTML:

<canvas id="canvas" resize draw></canvas>

directive:

app.directive('draw', function () {
    return {
        restrict: 'A',
        link: function postLink(scope, element, attrs) {
            var path;
            var drag = false;

            function mouseUp(event) {
                //Clear Mouse Drag Flag
                drag = false;
            }

            function mouseDrag(event) {
                if (drag) {
                    path.add(new paper.Point(event.layerX, event.layerY));
                    path.smooth();
                }
            }

            function mouseDown(event) {
                //Set  flag to detect mouse drag
                drag = true;
                path = new paper.Path();
                path.strokeColor = 'black';
                path.add(new paper.Point(event.layerX, event.layerY));
            }

            function initPaper() {
                paper.install(window);
                paper.setup('canvas');
            }

            element.on('mousedown', mouseDown).on('mouseup', mouseUp).on('mousemove', mouseDrag);

            initPaper();

        }
    };
});

Answer 2

There is no need to load paperscript. You can use javascript directly

<body ng-controller="PaperController">

    <canvas id="canvas" resize ng-mousedown="mouseDown($event)" ng-mousemove="mouseDrag($event)" ng-mouseup="mouseUp()"></canvas>
</body>
<script type="text/javascript">
function PaperController($scope){

    var path;
    var drag = false;

    $scope.mouseUp = function(){
        //Clear Mouse Drag Flag
        drag = false;
    };

    $scope.mouseDrag = function(event){
        if(drag){
            path.add(new paper.Point(event.x, event.y));
            path.smooth();
        }
    };

    $scope.mouseDown = function(event){
        //Set  flag to detect mouse drag
        drag = true;
        path = new paper.Path();
        path.strokeColor = 'black';
        path.add(new paper.Point(event.x, event.y));
    };

    init();
    function init(){
        paper.install(window);
        paper.setup('canvas');          
    }
}

</script>