angularjs directive to fit text in an overflow hidden element

replace text that would be too long to fit an overflow:hidden block with an abbr and an elipse.

by mrajcok

HTML

<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div ng-app="test">
    <div ng-controller="containerCtrl">
        <component ng-repeat='c in components' id="c.id" my-width="{{c.width}}" my-height="{{c.height}}" callbk="doSomething(data)">
    </div>
</div>

JavaScript

angular.module('test', []).

controller('containerCtrl', function ($scope, $timeout) {
    $scope.components = [{
        id: "c1",
        width: 100,
        height: 100
    }, {
        id: "c2",
        width: 200,
        height: 100
    }, {
        id: "c3",
        width: 300,
        height: 100
    }];
    console.log('bc1');
    $timeout(function() {
        console.log('bc2');
        $scope.$broadcast("onSomething", "");
    });
    $scope.doSomething = function (data) {
        alert("doing something, " + data);
    };
}).

directive('component', function () {
    console.log('d1');
    var linkFn = function (scope, element, attrs) {
    console.log('dlink');
        $(element).resizable({
            stop: function (event, ui) {
                scope.emitSomething({data: ["id", "position"]});
            }
        });
        scope.$on('onSomething', function (res) {
            alert("onSomething!");
        });
    };

    return {
        restrict: 'E',
        template: '<div class="ui-widget-content" style="width: {{width}}px; height: {{height}}px;"></div>',
        replace: true,
        scope: {
            width: '@myWidth',
            height: '@myHeight',
            emitSomething: '&callbk'
        },
        link: linkFn
    };
});