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

首先关闭 - 错误与root元素有关。 https://docs.angularjs.org/error/ $编译/ tplrt

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

现在你修复了这个问题 - 你的无限循环被调用，因为你试图用gallery.html填充滑块指令 - 但是在那个模板中，你调用了滑块指令。这是一个无限循环。

AngularJS滑块 - 无法获得指令

2 个答案:

directive.js

slider.html

gallery.html