角 - テキストエリア内にリンクがある

-2

私はクリック可能なリンクをtextarea要素内に持つという要件があります。 Angularのng-modelを使ってtextareaの値を設定しています。これを達成する方法を教えてください。プレイ用角 - テキストエリア内にリンクがある

デモあなたがこれを試すことができます

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.url = "http://stackoverflow.com/" 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
    <html ng-app="myApp" > 
 
    <head> 
 
    <script src="https://code.angularjs.org/1.4.9/angular.js"></script> 
 
    </head> 
 
    <body> 
 
     <div ng-controller="myCtrl"> 
 
     <textarea ng-model = "url"></textarea> 
 
     </div> 
 
    </body> 
 
</html>

出典

2016-12-20 Suresh PMS

リンクは** **編集可能** + **クリッカブルすべきですか？ – Mistalis

@Mistalis正確に。それは編集可能でなければならず、編集されたコンテンツもまたクリック可能なリンクである必要があります –

テキストエリア内でクリック可能なリンクを持つことはできません。あなたが行うことができることは、リンクに設定することができ、テキストボックスを使用してそれを編集するオプションを提供するアンカータグを持つことです。 – Manish

を下回っているとすることができる、それはあなた

HTML

<div ng-controller="myCtrl"> 
    <textarea class="textAreaLink" ng-model = "url" ng-click="callFunction()"></textarea> 
    </div>

CSS

役立ちます

.textAreaLink{color: blue;cursor: pointer} 
.textAreaLink:hover{color: blue;text-decoration: underline;}

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope, $location) { 
    $scope.url = "http://stackoverflow.com/"; 
    $scope.callFunction = function(){ 
    $location.path($scope.url); 
    } 
});

出典

2016-12-20 11:17:03

"リンク"だけでなく、テキストエリアのいずれかの部分がクリックされた場合、 "リンク"がトリガーされます。 – Quentin

回避策をありがとう！ –

@Quentinあなたがdownvoteする前にreqauirementをお読みください。要件は、ユーザーがテキストエリアのテキストを編集し、それをURLとしてクリックすることです。 –

角 - テキストエリア内にリンクがある

答えて

関連する問題