javascript - angular.js アプリケーションで jQuery プラグイン (flipclock) を使用する

Question

私はAngularJSをいじっていて、flipclock.jsというjQueryプラグインを含める必要があります。私はよくグーグルで検索し、Angular ディレクティブで jQuery をラップすることに関するこの記事を見つけました。

私はそれを見て、同じことをしましたflipclock-このように見えます

var app = angular.module('flipClock', []);
app.directive('FlipClock', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            $(element).FlipClock(scope.$eval(attrs.FlipClock));
        }
    }
});

次のマークアップで

<div ng-App="flipClock">
    <div id="countdown" class="countdown" flipclock="{}"></div>
</div>

しかし、何も起こっていません。エラーが発生します:

Uncaught ReferenceError: Base is not defined - flipclock.js:37

そして：37はちょうどFlipClock.Base = Base.extend({ ...

私のhtmlのソースの順序は次のとおりです。

<script src="components/jquery/jquery.js"></script>
<script src="components/angular/angular.js"></script>
<script src="components/angular-resource/angular-resource.js"></script>
<script src="components/angular-cookies/angular-cookies.js"></script>
<script src="components/angular-sanitize/angular-sanitize.js"></script>

<!-- build:js scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/pre.js"></script>
<!-- endbuild -->
<!-- build:js scripts/main.js -->

<script src="components/flipclock/libs/prefixfree.min.js"></script>
<script src="components/flipclock/flipclock.js"></script>