用angularjs遇到省略号

用户名

我遇到省略号和angularjs的问题。我想从父级动态更新最大宽度作为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;
}

指令名称在HTML中转换为用短划线分隔的大小写,因此您需要在HTML中引用这样的指令:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何阻止UILabel用省略号替换“ ...”

来自分类Dev

用JavaScript相当于Lua的省略号是什么?

来自分类Dev

在angularjs中一定数量的字符后放置省略号(...)

来自分类Dev

熊猫to_csv总是用省略号替换long numpy.ndarray

来自分类Dev

用省略号将nvarchar(max)截断为nvarchar(n)

来自分类Dev

Rails:用省略号自动链接?

来自分类Dev

如何为TD设置省略号

来自分类Dev

NLTK PunktSentenceTokenizer省略号拆分

来自分类Dev

禁用时,editText的省略号内容

来自分类Dev

这个语法“ ...”(省略号)是什么?

来自分类Dev

处理省略号

来自分类Dev

Reduce()和...(省略号)

来自分类Dev

Safari以错误的字体省略号

来自分类Dev

省略号不起作用

来自分类Dev

省略项中的省略号省略

来自分类Dev

截断省略号,不带宽度

来自分类Dev

从textNode获取固定的(用省略号表示)textContent

来自分类Dev

文字溢出的样式点:省略号

来自分类Dev

显示图像,用省略号修饰一些文本,然后显示图标

来自分类Dev

Python省略属性未分配,用省略号或None +类型的float提示

来自分类Dev

用括号和省略号在流中输入别名

来自分类Dev

防止asciidoctor用内联文字进行省略号替换

来自分类Dev

结构省略号

来自分类Dev

Rails:用省略号自动链接?

来自分类Dev

如何在python中加入用省略号(...)分隔的继续行

来自分类Dev

JavaScript链接省略号

来自分类Dev

简单的JavaScript省略号(...)

来自分类Dev

CSS用省略号填充表TD内的空格

来自分类Dev

句子中间省略号