Swiper.js AngularJS와는

Question

Semi-working JSFiddle

가 어떻게 그렇게 같은 지침에서 특성을 얻을 수있는 인라인 HTML에서 속성을 '수평 '아래로 아래의 속성, 또는

이 지시어는 원래 BinaryMuse에 의해 만들어진

angular.module('myApp') 
.directive('swiper', function($timeout) { 
     return { 
restrict: 'EA', 
template: "<div class='swiper-container'>" + 
    "<div class='swiper-wrapper'></div>" + 
    "<div style='display: none' ng-transclude></div>" + 
    "</div>", 
replace: true, 
transclude: true, 
// We use a controller here so the slide directive 
// can require it and call `addSlide`. 
controller: function($element, $attrs) { 
    var newSlides = []; 
    var mySwiper = null; 
    var slideCount = 0; 
    var callbacks = {}; 



    // Attached directly to the controller so other directives 
    // have access to it. 
    this.addSlide = function(html, callback) { 
    if (mySwiper) { 
     var newSlide = mySwiper.createSlide(html.html()); 
     // Hackily save off the callback based on 
     // a unique ID since getData() for 
     // swiper.clickedSlide doesn't appear to work 
     // when using setData() on newSlide. 
     newSlide.data('slideNumber', ++slideCount); 
     mySwiper.appendSlide(newSlide); 
     callbacks[slideCount] = callback; 
     mySwiper.swipeTo(0, 0, false); 
    } else { 
     // mySwiper hasn't been initialized yet; save 
     // the slide off in an array so we can add it later. 
     newSlides.push({html: html, callback: callback}); 
    } 
    }; 

    $timeout(function() { 
    console.log($attrs.swiper); 
    mySwiper = $element.swiper({ 

     mode: 'horizontal', 
     loop: true, 
     autoResize: true, 
     resizeReInit: true, 
     calculateHeight: true, 
     centeredSlides: true, 
     cssWidthAndHeight: false, 
     onSlideClick: function(swiper) { 
     // Look up the callback we saved off and call it. 
     var clicked = swiper.clickedSlide; 
     var slideNumber = clicked.data('slideNumber'); 
     var callback = callbacks[slideNumber]; 
     if (callback) callback(); 
     } 
    }); 

    // Now that mySwiper has been initialized, iterate 
    // over any calls to `addSlide` that happened 
    // before we were ready and add them to the swiper. 
    for (var i = 0; i < newSlides.length; i++) { 
       var slide = newSlides[i]; 
       this.addSlide(slide.html, slide.callback); 
      } 
      }.bind(this)); 
     } 
     } 
    }) 
     .directive('slide', function() { 
     return { 
restrict: 'EA', 
// Look for a parent `swiper` element and get its controller 
require: '^swiper', 
template: "<div class='swiper-slide' ng-transclude></div>", 
replace: true, 
transclude: true, 
link: function(scope, elem, attrs, swiper) { 
    swiper.addSlide(elem, attrs, function() { 
    scope.$apply(attrs.slide); 
      scope.$apply(attrs.ngClick); 
      }); 
     } 
     } 
      }); 

Answer 1

. 나는에게 도달 ... 인라인 아래의 속성을 가진 위에 내 HTML에 속성을 병합 그에게 도움을 청하고 그는 나를 위해 대답을 풀었다. 여기 그가 말하는 것을 말합니다.

그래서 옵션의 기본 목록부터 시작합니다. 우리가 swiper 속성에 무엇인가를 넘겨 주면 그것을 $ scope. $ eval로 객체로 변환 한 다음 angular.extend로 기본 옵션으로 섞습니다.

나는 또한 지침의 컨트롤러의 매개 변수 목록에 $의 범위와 $ attrs에 추가

var swiperOptions = { 
    loop: true, 
    mode: 'vertical', 
    onSlideClick: function(swiper) { 
    // Look up the callback we saved off and call it. 
    var clicked = swiper.clickedSlide; 
    var slideNumber = clicked.data('slideNumber'); 
    var callback = callbacks[slideNumber]; 
    if (callback) callback(); 
    } 
}; 
if ($attrs.swiper) angular.extend(swiperOptions, $scope.$eval($attrs.swiper)); 
$timeout(function() { 
    mySwiper = $element.swiper(swiperOptions); 

Working JSFIDDLE with Solution