Question

让我从我想要的开始：

   <ellipsis>Text which can be truncated and displayed with an ellipsis</ellipsis>
or <ellipsis>{{ some.value.from.scope }}</ellipsis>

就是这样。我只想在AngularJS指令或组件中使用transclusion。但是有一个障碍。我希望它能产生这个：

<div class="ellipsis" title="Transcluded contents">
  Transcluded contents
</div>

现在，如果它被截断并显示省略号，那么您可以将鼠标悬停在它上面并仍然可以看到全文。这是将那个被抄写的文本插入到一个属性中，这个属性为我吹响了一切。至少，也就是说，如果我想在翻译中使用AngularJS。

我可以使用像这样的超级简单组件：

angular.module('coreComponents')
    .component('ellipsis', {
        bindings: {
          content: '<'
        },
        template: '<div class="ellipsis" title="{{ $ctrl.content }}">{{ $ctrl.content }}</div>'
      });

但后来我不再使用翻译了。这必须像这样使用：

<ellipsis content="'Text which can be truncated and displayed with an ellipsis'"/>
<ellipsis content="some.value.from.scope"/>

不完全优雅。

所以我坚持尝试使用AngularJS提供的翻译功能来做某事但是每当我得到数据时，它总是只是原始文本，而不是基于周围范围内的最终值。那么，请告诉我如何构建一个简单的指令或组件来执行此操作。因为我已经尝试过，尝试过但没有成功，试图将其拉下来。我错过了什么？

不要问我我尝试过的是什么，答案是$ transclude（）。text（）和$ transclude（$ scope，（content）=＆gt; {something}）的每个变体;我能够想象。我甚至没有他们的记录，因为我花了三个小时尝试不同的版本，没有一个给我一个编译值，我可以放入组件的范围或使用$ element.attr（）来设置标题传入任何内容的元素。我已经阅读了关于翻译的所有问题，我没有看到任何使这项工作的问题（尽管我确实找到了几个例子，如果我用'{{something.in。范围}}'进入他们，他们失败了。）

如何在AngularJS指令/组件中进行编译转换？

0 个答案: