Question

我不太确定如何做到这一点。基本上我有一个自定义消息指令（作为一个元素），其范围内有几个字段，其中包含 content 字段，包含其文本。文本可以包含URL（以http / https开头）和主题标签（以＃和空格分隔开头）。

处理$ scope.content的惯用方法是什么，以便将所有链接和主题标签转换为超链接？

Answer 1

我不太确定“转换为超链接”是什么意思，但假设您将内容拆分为字符串数组。您可以将它附加到链接功能中的元素：

link: function($scope, iElm, iAttrs, controller) {
    var links = iElem.text().split(",");
    for (var i = 0; i < links.length; i++) {
        iElem.append("<a href='" + links[i] + "'>" + links[i] + "</a>");
    };
    $compile(iElm.contents())($scope);
}

对于追加功能，我建议使用Underscote template函数：

var linkTemplate = _.template('<a href="<%= link %>"><%= link %></a>');

然后在循环调用中

linkTemplate(links[i]);

Answer 2

实现这一目标的最简单方法是使用由于角度$ sce（严格上下文转义）和html绑定而导致的指令。

在这里，我将如何解决这个问题：

angular.module('myModule').directive('content', function () {
  return {
    scope: {
      text: '@'
    },
    link: function (scope, element, attrs) {
      var urlRegex = /((https?|ftp):\/\/(-\.)?([^\s\/?\.#-]+\.?)+(\/[^\s]*)?$)/g,
          urlReplacer = '<a href="\$1">\$1</a>',
          hashtagRegex = /#([0-9A-z_]*[A-z_]+[A-z0-9]*)/g,
          hashtagReplacer = '<a href="https://twitter.com/search/?q=%23\$1">#\$1</a>';

      scope.$watch('text', function (n) {
        if (n && n.length) {
          var parsed = n.replace(urlRegex, urlReplacer);
          parsed = parsed.replace(hashtagRegex, hashtagReplacer);
          element.html(parsed); 
        }
      });
    }
  };
});

在AngularJS指令中处理范围值的惯用方法是什么？

2 个答案: