我摆弄AngularJS,必须包含一个名为flipclock.js的jQuery插件。我在Google上搜索了很多内容,并发现了有关将jQuery包装在Angular指令中的article。
我看着它,并对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>
指令定义名称区分大小写。与HTML中的名称不匹配。尝试更改:
app.directive('FlipClock', function(){
to
app.directive('flipclock', function(){
和
$(element).FlipClock(scope.$eval(attrs.FlipClock));
to
$(element).FlipClock(scope.$eval(attrs.flipclock));