javascript - 来自内联 HTML 的 Swiper.js AngularJS 属性

Question

Semi-working JSFiddle

如何从指令中获取属性，如下所示:

<div swiper="{mode:'vertical'}">
    <slide ng-repeat="slide in news.images">
        <img src="{{slide.image}}" alt="{{slide.caption}}">
    </slide>
</div>

进入下面的这个 Controller :(我想用属性替换下面的 mode:'horizo​​ntal'，或者将上面 HTML 上的内联属性与下面的属性合并。

 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

该指令最初由 BinaryMuse 创建。我向他寻求帮助，他为我解决了答案。这是他要说的话。

所以我们从默认的选项列表开始。如果我们将任何内容传递给 swiper 属性，我们会将其转换为 $scope.$eval 的对象，然后将其与 angular.extend 混合到默认选项中。

我还将 $scope 和 $attrs 添加到指令 Controller 的参数列表中

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