title: Swiper.js AngularJS attributes from inline HTML
body: <p><a href="http://jsfiddle.net/Zuriel/LDdKW/" rel="nofollow">Semi-working JSFiddle</a></p>
  
  <p>How can I get attributes from a directive like so:</p>
  
  <pre><code>&lt;div swiper="{mode:'vertical'}"&gt;
      &lt;slide ng-repeat="slide in news.images"&gt;
          &lt;img src="{{slide.image}}" alt="{{slide.caption}}"&gt;
      &lt;/slide&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>into this controller below: (i'd like to replace mode:'horizontal' down below with the attributes, or merge the inline attributes on my HTML above with the attributes below..</p>
  
  <pre><code> angular.module('myApp')
   .directive('swiper', function($timeout) {
        return {
   restrict: 'EA',
   template: "&lt;div class='swiper-container'&gt;" +
    "&lt;div class='swiper-wrapper'&gt;&lt;/div&gt;" +
    "&lt;div style='display: none' ng-transclude&gt;&lt;/div&gt;" +
    "&lt;/div&gt;",
  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 &lt; 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: "&lt;div class='swiper-slide' ng-transclude&gt;&lt;/div&gt;",
  replace: true,
  transclude: true,
  link: function(scope, elem, attrs, swiper) {
    swiper.addSlide(elem, attrs, function() {
      scope.$apply(attrs.slide);
              scope.$apply(attrs.ngClick);
            });
          }
        }
              });
  </code></pre>