'滑块角度'单击小图像会返回相应的大图像

实际上，您最初共享的代码有很多错误，其中一些是：

• UL标签没有li项目
• ng show="image.visible"在ng repeat之外，因此图像总是未定义的
• ng重复出现在img标签上，所以只有一个链接里面有很多图片

使用$index的代码示例（属性在ng重复指令中可用）：

<ul class="minimage" ng-show="images.length"> <!-- show if there are items  -->
    <li ng-repeat="image in images"><a ng-click="returner($index)"><img ng-src="/sliderAngular/img/{{image.src}}" width="70" height="56"/></a></li>
</ul>

和：

scope.currentIndex=-1;
scope.returner = function(index){
    scope.currentIndex = index;
};

几个月前，我设法按照它想要的方式离开了它，现在我记住了这个问题，并回来为未来的读者提供了一个更完整的答案。

将此代码放在您想要显示滑块的位置下方

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <div images="images" class="slider" id="mauseOnOut">
    <div  class="slide" ng-repeat="image in images" ng-show="image.visible"> 
        <a ng-href="{{image.url}}"><img ng-src="{{image.src}}" width="444" height="250"/>
        <p class="texto">{{image.texto}}</p>
        </a>
    </div>
    <ul class="minimagem" ng-show="images.length"> 
      <li ng-repeat="image in images"><a ng-click="returner($index)"><img ng-src="{{image.src}}" width="70" height="56"/></a></li>
    </ul>
    <div class="arrows">
        <a href="" ng-click="prev()" ><img  src="http://s5.postimg.org/orczpkx0z/left_arrow.png"/></a> <a href="" ng-click="next()"><img src="http://s5.postimg.org/qkfwdwi7n/right_arrow.png"/></a>
    </div>
</div>
    </div>
</div>

将以下代码放入您的app.js、controller或directives的特定页面中。

myApp.directive('images', function factory($timeout) {
  var directiveDefinitionObject = {
    transclude: false,
    restrict: 'AE',
    multiElement: true,
    scope: {
        images: '='
    },
    link: function postLink(scope, iElement, iAttrs) { 
      scope.currentIndex=0;
    scope.returner = function(index){
    scope.currentIndex = index;
   };
        scope.next=function(){
            scope.currentIndex<scope.images.length-1?scope.currentIndex++:scope.currentIndex=0;
        };
        scope.prev=function(){
            scope.currentIndex>0?scope.currentIndex--:scope.currentIndex=scope.images.length-1;
        };
        scope.$watch('currentIndex',function(){
            scope.images. forEach(function(image){
                image.visible=false;
            });
            scope.images[scope.currentIndex].visible=true;
        });
        // Start: For Automatic slideshow
        var timer;
        var sliderFunc=function(){
            timer=$timeout(function(){
                scope.next();
                timer=$timeout(sliderFunc,3000);
            },3000);
        };
        sliderFunc();
        scope.$on('$destroy',function(){
            $timeout.cancel(timer);
        });
        var myDiv = document.getElementById('mauseOnOut');
        myDiv.onmouseover = function() { 
            $timeout.cancel(timer);
        };
        myDiv.onmouseout = function() { 
            timer=$timeout(sliderFunc,3000);
        };
         // End : For Automatic slideshow
   }
  };
  return directiveDefinitionObject;
});

将下面的代码放入您的controller中，并根据您的意愿进行编辑：

$scope.images = [
  {
        src:'http://s5.postimg.org/b2wzny14n/img1.png',
        url:'',
        texto:'Trees and mountains a pleasant and peaceful environment to live .'
  },
  {
        src:'http://s5.postimg.org/vlrvt0f1z/img2.jpg',
        url:'',
        texto:'Yellow and pond landscape sky that inspires a reflection on the existence'
  },
  {
        src:'http://s5.postimg.org/wms4i4w1j/img3.jpg',
        url:'',
        texto:'Yellow and pond landscape sky that inspires a reflection on the existence '
  },
  {
        src:'http://s5.postimg.org/k0hplatkn/img4.png',
        url:'',
        texto:'The cold and snow prevents does not prevent good news for those seeking good '
  },
  {
        src:'http://s5.postimg.org/nitphougn/img5.png',
        url:'',
        texto:'Imposing Rhino with your muscles , bones and horns forming one of the strongest animals of nature '
  }
   ];

请参阅jsFiddle 中的CSS和滑块操作