Question

我有一个带有新行分隔符和网址的文字：

first row\nFind me at http://www.example.com and also\n at http://stackoverflow.com。

我想编写带有<a></a>

的字符串和包装网址的指令

我有这个HTML：

<p ng-repeat="row in note_value.split('\n') track by $index"
               wm-urlify="row"
               style="display: inline-block;" 
               >
            </p>

控制器：

app.controller('myCntrl', function ($scope) {

     $scope.note_value = "first row\nFind me at http://www.example.com and also\n at http://stackoverflow.com";

});

我开始编写应该接受文本并返回 urlfied 文本的指令：

app.directive('wmUrlify',['$parse',
      function ($parse) {
        return {
           restrict: 'A',
          scope: true,
       link: function(scope, element, attrs) {

           function urlify(text) {
                var urlRegex = /(https?:\/\/[^\s]+)/g;
                return text.replace(urlRegex, function(url) {
                    return '<a href="' + url + '" target="_blank">' + url + '</a>';
                })

            }

           var text = $parse(attrs.wmUrlify)(scope);

            var html = urlify(text);

          element[0].inneHtml(html)

        }
        };
      }]);

但它不起作用，我得到错误：

TypeError：element [0] .html不是函数

预期的HTML应该是：

     <p>first row</p>
     <p>Find me at <a href="http://www.example.com" target="_blank">http://www.example.com</a> and also</p>
     <p> at <a href="http://stackoverflow.com" target="_blank">http://stackoverflow.com</a></p>

这是我的Fiddle

Answer 1

我将您的最后一行修改为element.html(html)并且有效

Answer 2

好的，我找到了解决方案：

我需要在附加html上调用onClick={function(e){e.currentTarget.parentElement.style.background = 'orange'; }}：

angular.element

修正Fiddle

非常感谢，

使用链接标记包装URL的指令

2 个答案: