Question

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

我正在尝试使用指令将范围变量（包含字符串）放到DOM上，我想操纵该文本并最终创建“Read More”文本截断功能。

HTML片段：

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

角/ 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上处理此元素感到失望？

Answer 1

我的理解是你在这里处理的元素不是你在标准jQuery函数中处理的JS元素。这是angularjs element，而不是DOM的多样化，我宁愿创建一个指令来设置＆＃34; Read More＆＃34;元素，并且还隐藏了单击后需要显示的整个文本。但是只能通过angularjs ng-model指令，而不是通过DOM操作。

Answer 2

角度不需要DOM。

这里展示了一些绑定内容的方法：

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

使用此

make

而不是这个：

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

祝你好运。： - ）

Answer 3

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

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

但请注意，text和html函数都将返回未评估的字符串{{ commentary }}，而不是commentary变量保存的字符串值。

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

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
)

改变Angular指令中的innerText

3 个答案: