Include external code into angular project

Question

I am trying to include some external code to an angular project I started working recently. I would like to add this confetti animation to the project

http://jsfiddle.net/vxP5q/61/?utm_source=website&utm_medium=embed&utm_campaign=vxP5q

I created a route for the page I need to create in app.js
  $stateProvider.state('result', {
    url: '/result',
    templateUrl: 'templates/result_election.html',
    controller: 'ElectionCtrl'
  })

As this page is linked to the ElectionCtrl I inserted the code from the fiddle into the ElectionCtrl but it doesnt seem to have any effect on my page. The fiddle code is included inside this :

angular.module('election',[]).controller('ElectionCtrl', function($http, $scope, $ionicPopup, $localStorage, $location, $stateParams ,$ionicLoading){})

Answer 1

The code you linked is just standard JavaScript that looks for a <canvas id="canvas"></canvas> and inserts the animation, on $(document).ready . In order to use this in an angular partial, a few things need to happen.

First, the partial template 'templates/result_election.html' would need to have the canvas element.

Secondly, the code in $(document.ready) would need to be moved into a function that can be called in $stateChangeSuccess from ui-router , since the canvas must be present on the page for the function to find it.

A more advanced form of this would be creating a directive which contains the template and the code to be executed in the $compile phase of the directive.