carusel2

by Max Kovalov

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<carusel>
  <carusel-item>
    <div>
      hi1
    </div>
  </carusel-item>
  <carusel-item>
    <div>
      hi2
    </div>
  </carusel-item>
  <carusel-item>
    <div>
      hi3
    </div>
  </carusel-item>
  <carusel-item>
    <div>
      hi4
    </div>
  </carusel-item>
  <carusel-item>
    <div>
      hi5
    </div>
  </carusel-item>
</carusel>

JavaScript

var mod = angular.module('carusel', []);

mod.directive('carusel', ['$sce', '$timeout', function($sce, $timeout){
	function compile(tElement){
    var template = '<div>prev</div><div class="carusel_items_list"><carusel-item ng-repeat="item in vm.elements" ng-bind-html="item"></carusel-item></div><div>next</div><pagination>paginatino</pagination>';
  	var elements = $(tElement.find('carusel-item')).toArray().map(function(el, i){return $sce.trustAsHtml(el.innerHTML);});
    return {
    	pre: function(scope, elm, atts, controller){
      	$timeout(function(){
      			controller.set_elements(elements);
        });
       },
    }
  }
  function controller($scope){
  	this.$scope = $scope;
  }
  controller.prototype.set_elements = function(elements){
  	this.elements = elements;
  }
  return {
  	restrict: 'E',
  	compile: compile,
    controller: ['$scope', controller],
    controllerAs: 'vm',
  }
}]);

angular.bootstrap(document, ['carusel']);