在 Angular 指令中更改 innerText答案

【问题标题】：Altering innerText in an Angular directive在 Angular 指令中更改 innerText
【发布时间】：2015-11-13 00:34:54
【问题描述】：

在我看来这应该是直截了当的，但我认为我误解了这里的操作顺序。文档对我来说有点难以消化，我在这里找到的答案让我更接近答案，但还不够远。

我正在尝试使用指令将范围变量（包含字符串）放置到 DOM 上，并且我想操纵该文本并最终创建一个“阅读更多”文本截断函数。

HTML sn-p:

<read-more>{{ commentary }}</read-more>

Angular/Coffeescript：

  app.directive('readMore', [ ->
    restrict: 'E'
    scope: false
    link: (scope, element, attrs) ->
      console.log(element[0])
      element[0].innerText = element[0].innerText.substring(0, 125) + "..."
  ])

来自该变量的文本被读入 DOM，控制台将元素记录为<read-more ng-class="ng-binding">，{{ commentary }} 字符串打印在标签之间的控制台中，但是，我的函数不会对其进行操作。

我知道它是正确的元素（和索引），但由于某种原因，innerText 和 innerHTML 不会影响 DOM 上的内容。

如果我将link 函数中的返回行更改为：

element[0].innerText = "Foo"

我在控制台中的 <read-more> 标记之间一无所获，当然，现在 DOM 中没有任何内容。

关于link 如何处理 DOM 上的这个元素，我缺少什么？

【问题讨论】：

我认为您需要阅读有关嵌入的内容
我试着阅读上面的文档；很高兴看到一个更好的解释来回答这个问题！
我不使用嵌入，只是将变量作为属性传递给<read-more usethis='commentary'></read-more>。如果您在 SO 或 plnkr 上设置代码，我很乐意为您工作

标签： angularjs dom coffeescript

【解决方案1】：

我的理解是，您在这里处理的元素不是您正在处理的 JS 元素，例如在标准 jQuery 函数中。这是angularjs element，我宁愿创建一个指令来设置“阅读更多”元素的模型，并隐藏点击后需要显示的整个文本。但是只能通过 angularjs ng-model 指令来做到这一点，而不是通过 DOM 操作。

【讨论】：

【解决方案2】：

Angular 不需要 DOM。

这里介绍几种绑定内容的方法：

http://plnkr.co/edit/OSWIy0?p=preview

使用这个

link: function($scope) {
    $scope.otherText = 'Here more text. For example, this maybe come from http-stream.';
}

改为：

element[0].innerText = element[0].innerText.substring(0, 125) + "..."

祝你好运。 :-)

【讨论】：

是的，从范围参数中处理值肯定是更简单的方法。

【解决方案3】：

Angular 使用 jQuery（如果可用）或 jQLite 为元素提供了一个包装器，因此请使用 html 或 text 函数：

link: (scope, element, attrs) ->
  commentString = element.html() ## alternatively use element.text()

但是请注意，text 和 html 函数都将返回未计算的字符串 {{ commentary }}，而不是 commentary 变量所包含的任何字符串值。

要解决这个问题，只需使用传递给指令的link 函数的scope 参数来寻址commentary。

link: (scope, element, attrs) ->
  commentString = scope.commentary

  ...  ## perform string manipulation here

  element.text(newCommentString)

这会将元素文本设置为您传递给它的任何字符串。至于更新文本：如果单击“阅读更多”之类的内容，请准备好事件处理程序（仍在link: 内部，如下所示：

element.on('click', ->
  element.text(commentString) ## the full commentary string from above
)

【讨论】：