Card Carousel Angularjs

Question

我正在尝试实施this animation

Jargon.html

<ion-view title="Jargon">
  <ion-content>
    <a class="item" href="#/jargon"></a>

<div class="container">

  <div data-card="4" class="card"><span>Click Me</span></div>
  <div data-card="3" class="card"><span>Click Me</span></div>
  <div data-card="2" class="card"><span>Click Me</span></div>
  <div data-card="1" class="card"><span>Click Me</span></div>
  <div data-card="0" class="card"><span>Click Me</span></div>

</div>
</ion-content>

控制器：jargonController.js

angular.module('starter.jargonController', ['ionic'])
.controller('jargonCtrl', function (){
    var rotate, timeline;

  rotate = function() {
    return $('.card:first-child').fadeOut(400, 'swing', function() {
      return $('.card:first-child').appendTo('.container').hide();
    }).fadeIn(400, 'swing');
  };

  timeline = setInterval(rotate, 1200);

  $('.card').click(function() {
    return rotate();
  });

});

我收到此错误：

  

    

错误：$未定义@ http://localhost:8100/js/controllers

         

ReferenceError：$未定义

  

这一行产生错误：

    return $('.card:first-child').fadeOut(400, 'swing', function() {

我错过了什么？

更新

这就是我获得布局的方式。好像它没有看到css文件。

虽然我确定在这里添加：

.state('jargon', {
        url: 'jargon',
        templateUrl: 'templates/jargon.html',
        controller: 'jargonCtrl',
        css: 'css/jarg.css'

Answer 1

您可能缺少jQuery，如果您想坚持使用jQuery，可以将其包含在https://jquery.com/中。

或者您可以使用角度来使用不同的approch：

<ion-view title="Jargon">
  <ion-content>
    <a class="item" href="#/jargon"></a>

    <div class="container">

      <div ng-repeat="n in [0,1,2,3,4]" class="card"><span ng-click="rotate()">Click Me</span></div>

    </div>
    </ion-content>

和

angular.module('starter.jargonController', ['ionic'])
        .controller('jargonCtrl', ['$scope', function ($scope) {
                $scope.rotate = function () {
                    //angular code for your animation
                };
            }]);