Question

如何从指令中获取属性：

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

进入下面的控制器:(我想用属性替换下面的模式：'水平'，或者将我上面的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添加到指令控制器

的参数列表中

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

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

1 个答案: