是否可以在<input>标签 angularjs 中使链接可点击？

Question

HTML

<input type="text" placeholder="enter link here..." name="link" ng-model="link"/>

控制器：：

$scope.link = "https://stackoverflow.com"

当单击输入框中的链接时，它应该可单击并重定向到StackOverflow页面。

Answer 1

您可以使用正则表达式在字符串中创建可点击的 URL

在控制器中：

    var regex = '/(b(ftp|http|https)://[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/ig'
    var link = "https://stackoverflow.com";
  var clickableLink =  link.replace(regex, function (url) {
     return '<a target="_blank" href="' + url + '">' + url + '</a>';
  });
 console.log("clickableLink::", clickableLink);

Answer 2

这不是

一个角度问题，而是一个DOM问题。

输入元素不能包含子节点，因此答案是否定的，但是，使用像这样的东西是很有可能的：

.pseudo-input {
  width: 250px;
  height: 30px;
  border: 1px solid #ccc;
  line-height: 30px;
}
.pseudo-input a {
  cursor: pointer;
}

<div class="pseudo-input" contenteditable>
You can <a href="http://google.com" target="_blank">click me!</a>
</div>