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

Question

我不太确定该怎么做。基本上我有一个自定义消息指令（作为一个元素），它的范围内有几个字段，其中包含其文本的内容字段。文本可以包含 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);
}

对于 append 函数，我建议改用 Underscote模板函数：

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

然后在循环调用中

linkTemplate(links[i]);

Answer 2

实现这一点的最简单方法是使用指令，因为 Angular 的 $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); 
        }
      });
    }
  };
});