JSFiddle - React, Tailwind, and code Playground

by 311chaos

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<div ng-app="MyApp">
    <div ng-controller="appCtrl" class="wrapper">
        <div class="testHeight content" get-width row-height='100'>This Div height is passed in as a string</div>
        <div class="testHeight content" get-width row-height=myheight>This Div height is passed in as a value from the controller. You can change it below.</div>
        <input type="text" ng-model=myheight></input>{{myheight}}
         <div some-boxes class="four columns bookitem" ng-repeat="book in books">{{book.title}} by {{book.author}}</div>
    </div>

</div>

CSS

.testHeight {

    border:1px solid blue;

}

div .wrapper {

    padding:20px;

}

div .content {

    margin:10px;

}

JavaScript

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

myMod.directive('getWidth', function () {
    return {
        restrict: "A",
        scope: {
            "rowHeight": '='
        },
        link: function (scope, element) {

            scope.$watch("rowHeight", function (value) {
                console.log(scope.rowHeight);
                $(element).css('height', scope.rowHeight + "px");
            }, false);
        }
    }
});

myMod.directive('someBoxes', function()
{
	return function(scope, element, attrs)
	{
		$(element).css('border', '1px solid red');
        $(element).css('text-align', 'center');
	};
});


function appCtrl($scope) {
    $scope.myheight = 50;
    
    $scope.books = [
        {title:'Where the Red Fern Grows', author: 'Wilson Rawls'},
        {title:'Where the Sidewalk Ends', author: 'Shel Silverstein'},
    ];
}