0
aktualisieren Ich habe diesen Code, der Eingabe von einem Eingabebereich und fügt den Text an der Caret-Position in einem Textbereich, der Einfügeteil funktioniert genau aber Das ng-Modell des Textbereichs kann nicht aktualisiert werden. Hier ist der Codewie man ng-modell von textarea nach manueller einfügung von einigen text in es
var app = angular.module('plunker', []);
app.controller('MyCtrl', function($scope, $rootScope) {
$scope.items = [];
$scope.add = function() {
$scope.items.push($scope.someInput);
$rootScope.$broadcast('add', $scope.someInput);
}
});
app.directive('myText', ['$rootScope', function($rootScope) {
return {
link: function(scope, element, attrs) {
$rootScope.$on('add', function(e, val) {
var domElement = element[0];
if (document.selection) {
domElement.focus();
var sel = document.selection.createRange();
sel.text = val;
domElement.focus();
} else if (domElement.selectionStart || domElement.selectionStart === 0) {
var startPos = domElement.selectionStart;
var endPos = domElement.selectionEnd;
var scrollTop = domElement.scrollTop;
domElement.value = domElement.value.substring(0, startPos) + val + domElement.value.substring(endPos, domElement.value.length);
domElement.focus();
domElement.selectionStart = startPos + val.length;
domElement.selectionEnd = startPos + val.length;
domElement.scrollTop = scrollTop;
} else {
domElement.value += val;
domElement.focus();
}
});
}
}
}])<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MyCtrl">
<input ng-model="someInput">
<button ng-click="add()">Add</button>
<p ng-repeat="item in items">Created {{ item }}</p>
</div>
<p>add some text and change caret position and insert test using input area above</p>
<textarea my-text="" ng-model="textarea">
</textarea>
<p>{{textarea}}</p>
</body>
</html>
Nein, ich benutze kein rootscope, es ist nur ein schnelles Beispiel, das ich aufgestellt habe, anstatt den riesigen Code zu posten. –
und jawohl, es repariert es –
jedoch könnten Sie tatsächlich erwägen, die Gültigkeitsbereich-Variable in Javascript zu setzen, da dies automatisch die Änderungen verdaut. Sieh meine Antwort – nicost