JSFiddle - React, Tailwind, and code Playground

by davenaeder

HTML

<script src="http://code.angularjs.org/1.2.8/angular.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.8/angular-mocks.js"></script>
<div class="container" ng-app="myApp">
    <awesome-sauce></awesome-sauce>
</div>

CSS

.image-style {
    width: 200px;
    height: 200px;
}
.info {
  margin-left: 20px;
  padding-left: 10px;
  border-left: 2px solid #ccc;
}
}

JavaScript

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

// this is run only once on initialization
app.run(function($httpBackend) {
    data = {
        items: ['Chuck', 'Norris', 'is', 'awesome']
    }
    
    // capture response and send data
    $httpBackend
        .when('GET','api/items')
        .respond(data);
});


var imagePath = 'http://blogs.name.com/wp-content/uploads/2013/02/chuck-norris-awesome-sauce.jpg'

app.directive("awesomeSauce", function ($http) {
    return {
        restrict: 'E', 
        replace: true,
        
        template: '<div>' +
                    '<h3>Yay for directives!</h3>' +
                    '<div class="info">' + 
                      '<div ng-repeat="item in items">{{item}}</div>' + 
                    '</div>' +
                  '</div>',
        
        link: function(scope, element, attrs) {
                        
            // you can do your jQuery like things here
            element.append('<br><img class="image-style img-rounded" src="' + imagePath + '"/>');
            
            // example of async request
            $http.get('api/items').success(function(data) {
                console.log("yay data:", data)
                scope.items = data.items;
            });
        }
    }
});