圖像滑塊不起作用的角度JS

Question

我新手到角js..But儘量讓圖像滑塊在我的文件中使用的路線..

而且也是我使用route..Acutally我「M具有三頁..

1.home 2.關於 3.contact

爲此，我創建index文件，其中我添加頁眉和頁腳

，而我在我的index頁面添加滑塊它工作正常，我..

但是，如果我在home page..It做同樣的事情將無法正常工作，我囂找不到我的控制檯還任何錯誤..

我不知道如何解決它..

在這裏，我附上我的所有代碼..

的script.js

// create the module and name it scotchApp 
var scotchApp = angular.module('scotchApp', ['ngRoute','ngAnimate', 'ngTouch']); 

// configure our routes 
scotchApp.config(function($routeProvider) { 
    $routeProvider 

     // route for the home page 
     .when('/', { 
      templateUrl : 'pages/home.html', 
      controller : 'homeController' 
     }) 

     // route for the about page 
     .when('/about', { 
      templateUrl : 'pages/about.html', 
      controller : 'aboutController' 
     }) 

     // route for the contact page 
     .when('/contact', { 
      templateUrl : 'pages/contact.html', 
      controller : 'contactController' 
     }); 
}); 

// create the controller and inject Angular's $scope 
scotchApp.controller('mainController', function($scope) { 

    //Logo 
    $scope.logo = 'logo.png'; 

    //username 
    $scope.username = 'Jonathan Stephanopalus'; 

    //footercontent 
    $scope.footer = [ 
     { title: 'Contacts' }, 
     { title: 'Feedback' }, 
     { title: 'Help' }, 
     { title: 'Site Map' }, 
     { title: 'Terms & Conditions' }, 
     { title: 'Privacy Statement' }, 
     { title: 'Cookie Policy' }, 
     { title: 'Trademarks' } 

    ]; 

}); 

scotchApp.controller('homeController', function($scope) { 

    // create a message to display in our view 
    $scope.message = "Lorem Ipsum "; 
    //lastdiv 
    $scope.lastdiv = { image : "women_wright.png" ,title:"Get to know Cisco better: Community Forums"}; 

    //slider 
    $scope.slides = [ 
     {image: 'images/img00.jpg', description: 'Image 00'}, 
     {image: 'images/img01.jpg', description: 'Image 01'}, 
     {image: 'images/img02.jpg', description: 'Image 02'}, 
     {image: 'images/img03.jpg', description: 'Image 03'}, 
     {image: 'images/img04.jpg', description: 'Image 04'} 
    ]; 

    $scope.direction = 'left'; 
    $scope.currentIndex = 0; 

    $scope.setCurrentSlideIndex = function (index) { 
     $scope.direction = (index > $scope.currentIndex) ? 'left' : 'right'; 
     $scope.currentIndex = index; 
    }; 

    $scope.isCurrentSlideIndex = function (index) { 
     return $scope.currentIndex === index; 
    }; 

    $scope.prevSlide = function() { 
     $scope.direction = 'left'; 
     $scope.currentIndex = ($scope.currentIndex < $scope.slides.length - 1) ? ++$scope.currentIndex : 0; 
    }; 

    $scope.nextSlide = function() { 
     $scope.direction = 'right'; 
     $scope.currentIndex = ($scope.currentIndex > 0) ? --$scope.currentIndex : $scope.slides.length - 1; 
    }; 

}); 

scotchApp.animation('.slide-animation', function() { 
    return { 
     beforeAddClass: function (element, className, done) { 
      var scope = element.scope(); 

      if (className == 'ng-hide') { 
       var finishPoint = element.parent().width(); 
       if(scope.direction !== 'right') { 
        finishPoint = -finishPoint; 
       } 
       TweenMax.to(element, 0.5, {left: finishPoint, onComplete: done }); 
      } 
      else { 
       done(); 
      } 
     }, 
     removeClass: function (element, className, done) { 
      var scope = element.scope(); 

      if (className == 'ng-hide') { 
       element.removeClass('ng-hide'); 

       var startPoint = element.parent().width(); 
       if(scope.direction === 'right') { 
        startPoint = -startPoint; 
       } 

       TweenMax.fromTo(element, 0.5, { left: startPoint }, {left: 0, onComplete: done }); 
      } 
      else { 
       done(); 
      } 
     } 
    }; 
}); 

scotchApp.controller('aboutController', function($scope) { 
    $scope.message = 'Look! I am an about page.'; 
}); 

scotchApp.controller('contactController', function($scope) { 
    $scope.message = 'Contact us! JK. This is just a demo.'; 
}); 

home.html的

<div ng-controller="homeController"> 
    <div class="container slider"> 
     <img ng-repeat="slide in slides" class="slide slide-animation nonDraggableImage" ng-swipe-right="nextSlide()" ng-swipe-left="prevSlide()" ng-hide="!isCurrentSlideIndex($index)" ng-src="{{slide.image}}"> 
     <a class="arrow prev" href="#" ng-click="nextSlide()"></a> 
     <a class="arrow next" href="#" ng-click="prevSlide()"></a> 
     <nav class="nav"> 
      <div class="wrapper"> 
       <ul class="dots"> 
        <li class="dot" ng-repeat="slide in slides"> 
         <a href="#" ng-class="{'active':isCurrentSlideIndex($index)}" ng-click="setCurrentSlideIndex($index);">{{slide.description}}</a> 
        </li> 
       </ul> 
      </div> 
     </nav> 
     test 
    </div> 
</div> 

的index.html

<!DOCTYPE html> 

<!-- define angular app --> 
<html ng-app="scotchApp"> 

<head> 
     <!-- SCROLLS --> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> 
    <!-- <link rel="stylesheet" href="styles/main.css" /> --> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /> 
    <!-- <link href="css/bootstrap.css" rel="stylesheet"> --> 
    <link rel="stylesheet" href="css/styles.css"> 
    <!-- <script src="js/app.js"></script> --> 

     <!-- SPELLS --> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-animate.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-touch.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script> 
     <!-- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> --> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script> 
    <script src="script.js"></script> 
</head> 

<!-- define angular controller --> 
<body class="angular_class" ng-controller="mainController"> 

    <nav class="navbar navbar-default"> 
    <div class="container"> 
     <div class="menu_1"> 
     <div class="navbar-header"> 
      <a class="navbar-brand" href="/"><img src="image/{{logo}}"></a> 
     </div> 
     <div class="f_right"> 
      <p>Welcome, {{ username }}</p> 
      <img src="image/sml_logo.png"> 
     </div> 
     </div> 
     <div class="menu_1"> 

     <ul class="nav navbar-nav navbar-left"> 
      <li ng-repeat="teams in teamArray"><a href="#{{ teams.link }}">{{ teams.team_name }}</a></li> 
     </ul> 
     <div class="f_right"> 
      <input type="text" class="searchbox" placeholder="Search"></input> 
     </div> 
     </div> 
    </div> 
    </nav> 

    <div id="main"> 

    <!-- angular templating --> 
     <!-- this is where content will be injected --> 
    <div ng-view></div> 

    </div> 

    <footer class="text-center"> 
    <div class="footer_block"> 
     <span ng-repeat="ft in footer"><a href="">{{ ft.title }}</a></span> 
    </div> 
    </footer> 

</body> 

</html> 

而對於信息，我按照這個link

莫非有人請幫我出這個..

謝謝

Answer 1

變化home.html的

<div ng-controller="homeController"> 
<div class="container slider"> 
    <img ng-repeat="slide in slides" class="slide slide-animation nonDraggableImage" ng-swipe-right="nextSlide()" ng-swipe-left="prevSlide()" ng-hide="!isCurrentSlideIndex($index)" ng-src="{{slide.image}}"> 
    <a class="arrow prev" href="#" ng-click="nextSlide()"></a> 
    <a class="arrow next" href="#" ng-click="prevSlide()"></a> 
    <nav class="nav"> 
     <div class="wrapper"> 
      <ul class="dots"> 
       <li class="dot" ng-repeat="slide in slides"> 
        <a href="#" ng-class="{'active':isCurrentSlideIndex($index)}" ng-click="setCurrentSlideIndex($index);">{{slide.description}}</a> 
       </li> 
      </ul> 
     </div> 
    </nav> 
    test 
</div> 

與

<div class="container slider"> 
    <img ng-repeat="slide in slides" class="slide slide-animation nonDraggableImage" ng-swipe-right="nextSlide()" ng-swipe-left="prevSlide()" ng-hide="!isCurrentSlideIndex($index)" ng-src="{{slide.image}}"> 
    <a class="arrow prev" href="#" ng-click="nextSlide()"></a> 
    <a class="arrow next" href="#" ng-click="prevSlide()"></a> 
    <nav class="nav"> 
     <div class="wrapper"> 
      <ul class="dots"> 
       <li class="dot" ng-repeat="slide in slides"> 
        <a href="#" ng-class="{'active':isCurrentSlideIndex($index)}" ng-click="setCurrentSlideIndex($index);">{{slide.description}}</a> 
       </li> 
      </ul> 
     </div> 
    </nav> 
    test 
</div>