javascript - 在 angular.js 应用程序中使用 jQuery 插件 (flipclock)

Question

我正在摆弄 AngularJS，必须包含一个名为 flipclock.js 的 jQuery 插件.我在谷歌上搜索了很多，发现了这个 article关于在 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>

Answer 1

指令定义名称区分大小写。它与 HTML 中的名称不匹配。尝试更改:

app.directive('FlipClock', function(){

到

app.directive('flipclock', function(){

和

$(element).FlipClock(scope.$eval(attrs.FlipClock));

到

$(element).FlipClock(scope.$eval(attrs.flipclock));