Question

我正在使用角度js和jssor滑块如下。就我而言，jssor滑块还没有$destroy方法。但我需要用户点击刷新按钮并重新启动jssor滑块。

正如您所看到的，如果我通过单击刷新功能重新启动jssor滑块，它目前无法工作。

我不想调用.remove()函数并绑定html，因为它似乎不那么棱角分明。还有其他方法吗？

我无法创建自己的$destroy方法，因为jssor滑块库源代码是uglify。

＆＃13;

angular.module('app', [])

.controller('FrameController', ['$scope', '$injector', function($scope, $injector) {
  initSlider();

  $scope.refresh = initSlider;

  function initSlider() {
    var image = [];
    var count = Math.floor(Math.random() * 6) + 1;

    for (var i = 0; i < count; i++) {
      image.push('https://unsplash.it/600/' + i * 100 + '?random');
    }

    $scope.image = image;

    console.log($scope.image);

    function jssor_slider1_init(containerId) {
      var options = {
        $AutoPlay: 1
      };
      var jssor_slider1 = new $JssorSlider$(containerId, options);
    };

    setTimeout(function() {
      jssor_slider1_init('slider1_container');
    });
  }

}]);

setTimeout(function() {
  angular.bootstrap(document.getElementById('body'), ['app']);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jssor-slider/25.2.0/jssor.slider.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div id="body">
  <div ng-controller="FrameController">
    <button ng-click="refresh()">
      Click to refresh
    </button>
    <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
      <!-- Slides Container -->
      <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
        <div ng-repeat="item in image track by $index">
          <img ng-src="{{item}}" /></div>
      </div>
    </div>
  </div>

＆＃13;

重新初始化jssor滑块

0 个答案: