AngularJS 滑块 - 无法使指令起作用

Question

您好，我正在尝试制作一个我从互联网上下来工作的滑块，但是，我总是遇到错误。在 gallery.html 中，当我将滑块元素放在顶部时，我什么也得不到，当我将它放在底部时，我得到错误。错误是这样的

Error: [$compile:tplrt] http://errors.angularjs.org/1.4.8/$compile/tplrt?p0=slider&p1=partials%2Fgallery.html

更改了我的代码以匹配其中一条评论中的建议。

我不再收到与不只有 1 个根元素有关的错误。现在，我无法让下一个和上一个工作。它只是将我重定向到主页。笔记： - gallery.html 和 slider.html 位于名为 partials 的文件夹中 - 所有图像都在名为 img

的文件夹中

提前致谢！

index.html

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
  <!-- ANGULAR IMPORTS -->
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/ui-router-master/release/angular-ui-router.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://code.angularjs.org/1.4.7/angular-animate.js"></script>

    <!-- JS FILES -->
    <script src="js/controller.js"></script>
  <script src="js/directives.js"></script>
  <link href='css/app.css' rel='stylesheet' type='text/css'>
</head>

<body class="container">
  <div class="navbar">
    <a class="brand" href="#">Quick Start</a>
    <ul class="nav">
      <li><a ui-sref="state1">State 1</a></li>
      <li><a ui-sref="state2">State 2</a></li>
      <li><a ui-sref="gallery">Gallery</a></li>
    </ul>
  </div>
  <div class="dynamiccontent">
    <div ui-view></div>
  </div>         

  <!-- App Script -->
  <script>
    /** MAIN ANGULAR VAR */
    var myapp = angular.module('myapp', [
      /**IMPORT DEPENDENCIES*/
      'ui.router',
      'ngAnimate',
      /**FILE DEPENDENCIES*/ 
      'appController', 
      'slider.directive'
    ]);

    /** UI-ROUTING */
    myapp.config(function($stateProvider, $urlRouterProvider){  
      // For any unmatched url, send to /state1
      $urlRouterProvider.otherwise("/state1")

      $stateProvider
        .state('state1', {
            url: "/state1",
            templateUrl: "partials/state1.html"
        })
        .state('state1.list', {
          url: "/list",
          templateUrl: "partials/state1.list.html",
          controller: 'state1controller'
        })
        .state('gallery', {
          url: "/gallery",
          templateUrl: "partials/gallery.html",
          controller: 'slidercontroller'
        }) 
        .state('state2', {
          url: "/state2",
          templateUrl: "partials/state2.html"
        })
        .state('state2.list', {
          url: "/list",
          templateUrl: "partials/state2.list.html",
          controller: 'state2controller'
        });
    });
  </script>
</body>
</html>

controller.js

var appController = angular.module('appController',[]);

appController.controller('state1controller', ['$scope', function($scope){
    $scope.items = ["A", "List", "Of", "Items"];
}]);

appController.controller('state2controller', ['$scope', function($scope){
    $scope.things = ["A", "List", "Of", "Items"];
}]);

appController.controller('slidercontroller', ['$scope', function($scope) {
    $scope.pictures=[{src:'img1.png',title:'Pic 1'},{src:'img2.jpg',title:'Pic 2'},{src:'img3.jpg',title:'Pic 3'},{src:'img4.png',title:'Pic 4'},{src:'img5.png',title:'Pic 5'}]; 
}]);

directive.js

 angular.module('slider.directive', [])
  .directive('slider', function ($timeout) {
  return {
    restrict: 'AE',
    replace: true,
    scope:{
      pictures: '='
    },
    link: function (scope, elem, attrs) {
    scope.currentIndex=0;

    scope.next=function(){
      scope.currentIndex<scope.pictures.length-1?scope.currentIndex++:scope.currentIndex=0;
    };

    scope.prev=function(){
      scope.currentIndex>0?scope.currentIndex--:scope.currentIndex=scope.pictures.length-1;
    };

    scope.$watch('currentIndex',function(){
      scope.pictures.forEach(function(image){
        image.visible=false;
      });
      scope.pictures[scope.currentIndex].visible=true;
    });

    /* Start: For Automatic slideshow*/

    var timer;

    var sliderFunc=function(){
      timer=$timeout(function(){
        scope.next();
        timer=$timeout(sliderFunc,5000);
      },5000);
    };

    sliderFunc();

    scope.$on('$destroy',function(){
      $timeout.cancel(timer);
    });

    /* End : For Automatic slideshow*/

    },
    templateUrl:'partials/slider.html'
  }
});

gallery.html

<slider pictures="pictures"></slider>

slider.html

<div class="slider">
    <div class="slide" ng-repeat="image in pictures">
        <img ng-src="img/{{image.src}}"/>
    </div>
    <div class="arrows">
        <a href="#" ng-click="prev()"><img src="img/left-arrow.png"/></a>
        <a href="#" ng-click="next()"><img src="img/right-arrow.png"/></a>
    </div>
</div>

Answer 1

您在这里混淆了几个问题。 partials/gallery.html 用作指令和页面的模板。这导致指令在它自己的模板中被使用。

解决方案是从 gallery.html 中删除指令代码并在新文件 slider.html.

中使用它

directive.js

.directive('slider', function ($timeout) {
  return {
    ...
    templateUrl:'partials/slider.html'

slider.html

<div class="slider">
  <div class="slide" ng-repeat="image in images">
    <img ng-src="img/{{image.src}}"/>
  </div>
  <div class="arrows">
    <a href="#" ng-click="prev()"><img src="img/left-arrow.png"/></a>
    <a href="#" ng-click="next()"><img src="img/right-arrow.png"/></a>
  </div>
</div>

gallery.html

<slider images="pictures"/>

Answer 2

首先 - 错误确实与根元素有关。 https://docs.angularjs.org/error/$compile/tplrt

Template for directive '{0}' must have exactly one root element. {1}

现在您已解决该问题 - 调用无限循环是因为您试图用 gallery.html 填充滑块指令 - 但在该模板中，您调用的是滑块指令。所以这是一个无限循环。

AngularJS 滑块 - 无法使指令起作用

AngularJS slider - can't get directive to work

html

slider

angularjs

angularjs-directive

angularjs-scope

directive.js

slider.html

gallery.html