CODEWITHSUNDEEP
angularjsellipsis
user2589193
user2589193

Reputation: 69

Having trouble with ellipsis with angularjs

I am having issue with ellipsis and angularjs. I want to update max-width dynamically from parent as TD element width. I tried for 2 approach. One is updating dom after printing the table structure. Another is to provide directive. But nothing works.

HTML:

<table class="table data-table cvcTable sort display">
<thead>
    <tr>
        <th ng-repeat="column in tableOptions.columnDefs"
            ng-style="{'width': column.width}"><a href
            ng-click="tableEvents.sort('{{column.field}}',$event)">{{column.label}}
                <i class="pull-left" ng-class="column.orderType"></i>
        </a></th>
    </tr>
</thead>
<tbody>
    <tr ng-class-odd="'row-odd'" ng-class-even="'row-even'" ng-repeat="item in tableOptions.data">
        <td>{{item.key}}</td>
        <td><span title="{{item.value}}" ellipsisSpan
            class="ellipsis">{{item.value}}</span></td>
        <td><span title="{{item.comments}}" ellipsisSpan
            class="ellipsis">{{item.comments}}</span></td>
        <td>{{item.updated}}</td>
        <td>{{item.updatedBy}}</td>
    </tr>
</tbody>

Directive: I am not getting alert message.

app.directive('ellipsisSpan', function () {
    return {
        restrict: 'A',
        link: function ($scope, element, attrs, ctrl) {
            alert("Im inside call");
            // Do calculation
        }
    };
});

Dynamic Call: I can see following line working perfectly but don't see updated in DOM.

"a.css('max-width', width + 'px');"

angular.element(document).ready(function () {
    var element = angular.element(document.querySelector('.ellipsis'));
    angular.forEach(element, function(value, key){
         var a = angular.element(value);
         var width = a.parent()[0].clientWidth;
         a.css('max-width', width + 'px');
    });
    scope.$apply();
});

CSS:

.ellipsis {
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap;
    max-width: inherit;
}

Upvotes: 1

Views: 3943

Answers (1)

rob
rob

Reputation: 18513

Directive names get converted into dash separated case in the HTML so you need to reference your directive like this in the HTML:

<span title="{{item.value}}" ellipsis-span class="ellipsis">

Upvotes: 1

Related Questions