Javascript 如何解决；滑块'；s所有图像均显示"；在Angularjs中，但在HTML中，滑块可以正常工作

当我使用HTML时，图像滑块工作正常，但当我使用AngularJS时，图像滑块显示所有图像。单击“下一步”按钮显示所有图像后，滑块工作正常。我正在检查滑块长度，然后它显示一个滑块，但我有4个图像，当我单击“下一步”按钮时，它显示4个滑块长度。请帮帮我！！！提前谢谢

HTML代码

<div class="container" ng-init="image()">
  <div class="row">
    <div class="col-md-12" ng-repeat="img in images">
      <div class="mySlides">
        <div class="numbertext">{{img.id}}</div>
        <img class="size-i" ng-src="{{img.oe_images}}" style="width:100%;">
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <a class="prev" style="font-size:36px;" onclick="plusSlides(-1)">❮</a>
        <a class="next" style="font-size:36px;" onclick="plusSlides(1)">❯</a>
        <div class="row paddi">
          <div class="column" ng-repeat="img in images">
            <img class="demo cursor border-demo" ng-src="{{img.oe_images}}" style="width:100%;" data="{{img.id}}" ng-click="currentSlide(img.id)" alt="{{img.oe_images}}">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
//Javascript code for image slider
<script>
  var slideIndex = 1;
  showSlides(slideIndex);

  function plusSlides(n) {
    showSlides(slideIndex += n);

  }

  function currentSlide(n) {
    showSlides(slideIndex = n);
  }

  function showSlides(n) {
    console.log(n);
    var i;

    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("demo");

    if (n > slides.length) {
      slideIndex = 1
    }
    if (n < 1) {
      slideIndex = slides.length
    }
    console.log(slides.length);
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
  }
</script>
//Controller.js file 'use strict'; var app = angular.module('myApp', []); app.controller('indexCtrl', function($scope,$http) { $scope.image = function(){ $http.get(baseURL+'pptAllImages').then(successCallback, errorCallback); function successCallback(response){
$scope.images=response.data; console.log($scope.images); } function errorCallback(error){ console.log(error); } }; });

{{img.id}

HTML代码中的一切都很好，但当我使用AngularJS时就会出现这个问题。我正在使用自动滑块，然后它在AngularJS中正常工作，但我想再次单击滑块。我还使用了其他onclick滑块，但在每个onclick滑块中都会出现相同的问题。我正在从数据库中获取所有数据，但问题只出现在AngularJS中。请帮助我。
您需要将javascript函数移动到控制器中，并将它们绑定到作用域

$scope.showSlides(){}

另外，请确保使用

ng-app="myApp"

工作角度图像滑块的示例。。。
请解释如何使用$scope.showsileds（）{}此函数。当我使用它时，它表明它没有定义