6

設定

json ファイルへのパスを属性値として受け取り、json をロードしてから 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) {

        });
      }
    };
  });

マークアップ:

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

基本的なルーティング設定もあります。

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: '/'
      });
  });

ここのコントローラーは空です。

問題

json ファイルが正常に読み込まれ、Swiffy svg が正常に作成されます。しかし、swiffy ディレクティブを持つビューから移動すると、angular がエラーをスローし、アプリ全体が壊れます。

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)

ディレクティブで「$destroy」イベントがトリガーされた後にエラーがスローされるため、stage.destroy() が Swiffy オブジェクトで実行されたことがわかります。

エラーをスローする angularjs 関数は、https://github.com/angular/bower-angular/blob/7ae38b4a0cfced157e3486a0d6e2d299601723bb/angular.js#L3179にあります。

私が知る限り、 annotate() は匿名関数のパラメーターを読み取ろうとして失敗します。Swiffy のインスタンス化を削除してもエラーは発生しないため、エラーは Swiffy オブジェクトの作成の結果である必要があります。

私は使用しています：

これまでのところ、私は試しました：

  • AngularJS バージョン 1.2.17-build.111+sha.19d7a12 に更新します。(注釈機能の更新が含まれていますが、問題は解決しません)
  • ディレクティブから「厳密モード」を削除しました。
  • stage.destroy() を削除

angular.js ソースに変更を加えたくない (angular スキップ匿名関数を作成しようとしましたが、さらに多くの問題が発生しました)。swiffy ランタイムは縮小されていないため、何が起こっているのかわかりません。そこで。どんなアイデアも素晴らしいでしょう、ありがとう。

4

0 に答える 0