JSFiddle - React, Tailwind, and code Playground

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.js"></script>
<div ng-app="myApp">
  <div ng-controller="myController">
    
    <div class="owl-carousel owl-theme animated fadeIn">
        <trending ng-repeat="k in trends" k="k"></trending>
    </div>
  
   

  </div>
</div>

JavaScript

var app = angular.module('myApp', []);
app.directive("trending", function() {
  return {
    restrict: 'E',
    template: '<img ng-src="{{k.img}}" ng-model="k.img">',
    scope: {
      k: "="
    },
      link: function(scope, element) {
      
        element.parent().on('click ', function(e) {
              e.stopPropagation(); // the important part.
              alert("zdsdz")
              })
      }
  };
});
app.controller('myController', function($scope) {
 $scope.trends = [{
          "img": "https://placehold.it/150/435478/ffffff/&text=FIRST"
        }, {
          "img": "https://placehold.it/150/eceded/ffffff/&text=SEcond"
        }, {
          "img": "https://placehold.it/150/2cde33/ffffff/&text=3rd"
        }, {
          "img": "https://placehold.it/150/254544/ffffff/&text=4th"
        }, {
          "img": "https://placehold.it/150/345433/ffffff/&text=ITEM"
        }, {
          "img": "https://placehold.it/150/ecde33/ffffff/&text=ITEM"
        }, {
          "img": "https://placehold.it/150/534555/ffffff/&text=ITEM"
        }, {
          "img": "https://placehold.it/150/634433/ffffff/&text=ITEM"
        }, {
          "img": "https://placehold.it/150/636363/ffffff/&text=ITEM"
        }, {
          "img": "https://placehold.it/150/666666/ffffff/&text=ITEM"
        }, {
          "img": "https://placehold.it/150/345433/ffffff/&text=ITEM"
        }, {
          "img": "https://placehold.it/150/736636/ffffff/&text=ITEM"
        }, {
          "img": "https://placehold.it/150/999999/ffffff/&text=ITEM"
        }, {
          "img": "https://placehold.it/150/200987/ffffff/&text=LAST"
        }]

  
});