AngularJS directive with a Swiffy instance throws error on route navigation

Question

Setup

I have a directive that takes a path to a json file as attribute value, loads the json, then instantiates Swiffy:

angular.module('myApp')
  .directive('swiffy', function ($http) {
    return {
      restrict: 'A',
      scope: {},
      link: function postLink($scope, $element, attrs) {

        var stage;


        // Listen to angular destroy
        $scope.$on('$destroy', function() {

          if(stage) {
            stage.destroy();
            stage = null;
          }
        });


        // Load swiffy json
        $http({
          method: 'GET',
          url: attrs.swiffy
        }).success(function(data, status, headers, config) {

          stage = new swiffy.Stage( $element[0], data );
          stage.start();

        }).error(function(data, status, headers, config) {

        });
      }
    };
  });

The markup:

<div swiffy="my-animation.json"></div>

I also have a basic routing setup:

angular
  .module('myApp', [
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/info', {
        templateUrl: 'views/info.html',
        controller: 'InfoCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

The controllers here are empty.

Problem

The json file loads as it should and the Swiffy svg is created just fine. But when i navigate away from a view that has a swiffy directive, angular throws an error and the whole app breaks:

TypeError: Cannot read property '1' of null
    at annotate (angular.js:3179:24)
    at Object.invoke (angular.js:3846:21)
    at angular.js:5580:43
    at Array.forEach (native)
    at forEach (angular.js:323:11)
    at Object.<anonymous> (angular.js:5578:13)
    at Object.invoke (angular.js:3869:17)
    at angular.js:3711:37
    at Object.getService [as get] (angular.js:3832:39)
    at addDirective (angular.js:6631:51)

The error is thrown after the '$destroy' event has triggered in the directive, so i know that stage.destroy() has run on the Swiffy object.

The angularjs function that throws the error can be found here https://github.com/angular/bower-angular/blob/7ae38b4a0cfced157e3486a0d6e2d299601723bb/angular.js#L3179

As far as i can tell, annotate() is trying to read the parameters on an anonymous function and fails. I have no errors if i remove the Swiffy instantiation so the errors have to be a result of creating the Swiffy object.

I'm using:

AngularJS 1.2.16
Swiffy runtime version 6.0.2

So far I've tried:

updating to AngularJS version 1.2.17-build.111+sha.19d7a12. (It contains an update to the annotate function but that doesn't fix the problem)
removed 'strict mode' from directive.
removed stage.destroy()

I'd rather not make any changes to the angular.js source (I tried to make angular skip anonymous functions but that broke even more things) and the swiffy runtime is not available un-minified so i'm not sure what is going on in there. Any ideas would be great, thanks.

AngularJS directive with a Swiffy instance throws error on route navigation

Setup

Problem

I'm using:

So far I've tried:

0 Answers0