javascript - Reinitialize jssor slider -
i using angular js jssor slider follow. far concern, there no $destroy
method jssor slider yet. need user click on refresh button , reinit jssor slider.
as can see, won't work if reinit jssor slider clicking refresh function.
i not want call .remove()
function , bind html seems less angular way. there other method?
i can't create own $destroy
method jssor slider library source code uglify.
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; (var = 0; < count; i++) { image.push('https://unsplash.it/600/' + * 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']); });
<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 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 $index"> <img ng-src="{{item}}" /></div> </div> </div> </div>
Comments
Post a Comment