JSFiddle - React, Tailwind, and code Playground

by asgoth

HTML

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
<div ng-controller="AngularCtrl">
  <div my-repeater='{{items}}'>Replace me</div>
</div>

JavaScript

angular.element(document).ready(function() {
    angular.bootstrap(document, ['myApp']);
});

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

myApp.directive('myRepeater', function($compile) {
    return {
        restrict: 'A',
        replace: true,
        transclude: true,
        template: '<div ng-repeat="item in items">'
        + '<div ng-click="updateRating(item)" ng-class="getRatingClass(item.ratings)">{{item.ratings}}</div>' + '</div>',
        scope: {
            items: '@myRepeater'
        },
        
        link: function(scope, element, attrs) {
        }  
    };
});

function AngularCtrl($scope) {
    $scope.items = [{
        id: 1,
        ratings: 10},
    {
        id: 2,
        ratings: 20}];
    
    $scope.updateRating = function(item){
        alert('inside update rating');
        item.ratings = item.ratings+1;
    };

    
    $scope.getRatingClass = function(rating){
        alert('inside rating class');
        if(rating > 10){
            return 'important';
        }            
        return 'normal';
    };    
}