Double/Single button check

by codef0rmer

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div ng-app='double'>
    <div ng-controller='TestCtrl'>
        <!--
			your need to give maxheight because based on font-size, the button height may vary for single line tile depending on various browsers so It should not be half of what doubleline tile takes.
		1. Index is necessary to set `doubleline` property to true.
		2. maxHeight to perform a check on.
		3. data is the button's value.
		4. your model. So that you can reuse the same directive anywhere even though model name is different. Just have to pass it below. 
		-->
        <div class='btn' ng-repeat="item in buttons" check-line="{index: $index, maxheight: 20, data: item.val1, dataSource: 'buttons'}"></div>
    </div>
</div>

CSS

.btn {
	width: 200px !important;   
}

.doubleline { 
    border: 1px solid red;
}

JavaScript

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

app.controller('TestCtrl', function($scope) {
    $scope.buttons = [{
        val1: 'AngularJS is teh Awesome.',
        doubleline: false
    },{
        val1: 'BackboneJS is the short and sweet MVC framework.',
        doubleline: false
    },{
        val1: 'EmberJS is still under development and broken.',
        doubleline: false
    }];
});

app.directive('checkLine', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var options = scope.$eval(attrs.checkLine);
            angular.element(element).html(options.data);
			if ($(element).height() > options.maxheight) {
				scope[options.dataSource][options.index].doubleline = true;
                $(element).addClass('doubleline');
            }
        }
    };
});