Question

我遇到省略号和angularjs的问题。我想从父级动态更新max-width作为TD元素宽度。我尝试了2种方法。一个是在打印表结构后更新dom。另一个是提供指令。但没有任何作用。

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>

指令：我没有收到警报信息。

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

动态调用：我可以看到以下行完美运行，但在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;
}

Answer 1

指令名称在HTML中转换为破折号分隔的大小写，因此您需要在HTML中引用您的指令：

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

使用angularjs省略省略号

1 个答案: