Using jQuery (flipclock) plugin in angular.js application

Question

I was messing around with angular.js and should include a jquery plugin called flipclock.js . I searched Google a lot and found this jquery wrapper article in the angular directive.

I looked at him and did the same with the flip block - looking like this:

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

with the following markup

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

but nothing happens, I get an error:

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

And: 37 just FlipClock.Base = Base.extend({ ...

Source order in my 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

The directive definition name is case sensitive. This is contrary to the name in HTML. Try changing:

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

to

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

and

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

to

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