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;
}
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">