2016-12-20 5 views
-2

Ich habe eine Anforderung an eine anklickbare Verbindung in einem Textarea-Element. Setze den Wert für Textarea mit dem ng-Modell von Angular. Bitte lassen Sie mich wissen, wie dies zu erreichen ist.Angular - Mit einem Link innerhalb der Textarea

Demo für das Spiel unter

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>

+0

Der Link sollte ** editierbar ** + ** ** klickbare sein? – Mistalis

+0

@Mistalis Genau. Es sollte bearbeitbar sein und der bearbeitete Inhalt muss auch ein Link sein, der wieder anklickbar ist. –

+1

Es ist nicht möglich, einen anklickbaren Link in einem Textbereich zu haben. Instaed, was Sie tun können, ist ein Anchor-Tag, dessen href Sie für den Link festlegen können und eine Option zum Bearbeiten über das Textfeld bereitstellen. – Manish

Antwort

0

Sie können dies versuchen, sein kann es Ihnen

HTML

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

CSS

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

JS

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

Das wird die "Verknüpfung" auslösen, wenn irgendein Teil des Textbereiches angeklickt wird, nicht nur der "Link". – Quentin

+0

Danke für die Problemumgehung! –

+0

@Quentin Bitte lesen Sie die Voraussetzungen, bevor Sie den Download beenden. Die Anforderung ist, dass der Benutzer Text in Textarea bearbeiten und als URL darauf klicken kann. –

Verwandte Themen