使跨度对AngularJS应用的textarea有反应 [英] Make span reactive to a textarea of an AngularJS app
问题描述
我有以下代码: JSBin :
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Name = "John";
});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input type="text" ng-model="Name"><br>
<br>
<textarea id="myText" ng-model="Name"></textarea>
</div>
<span id="fromQuery">to override</span>
<script>
$("#myText").on("change keyup paste", function() {
console.log("changed");
var x = document.querySelector('#myText');
console.log(x.textContent);
document.querySelector('#fromQuery').innerHTML = x.innerText
});
</script>
</body>
</html>
我想实现两件事:
1)对 input 的更改将影响 textarea ，反之亦然，这已经由AngularJS实现.
1) the change to input should impact textarea and vice-versa, this has been already realised by AngularJS.
2)对 textarea 的更改(由于 input 的更改或手动修改)将影响 span .目前尚无法使用，属性 textContent 或 innerText 或 innerHTML 无效.
2) the change to textarea (either due to the change of input or from manual modifications) should impact the span. It does not work at the moment, the property textContent or innerText or innerHTML does not work.
有人知道这是怎么回事吗?
Does anyone know what's wrong here?
此外，将onchange事件集成到 myApp 中是否是更好的做法?
Additionally, will it be a better practice to integrate the onchange event into myApp as well?
推荐答案
最佳实践是永远不要在控制器内部使用JQuery或angular.element()进行DOM操作.控制器仅用于我们的业务逻辑.我们可以在其中使用服务，工厂，$ scope，值，常量等.
The best practice is never use JQuery or angular.element() for DOM manipulation inside controllers. Controllers are only used for our business logic. We can use service, factory, $scope, value, constants etc inside it.
坏方法-
我们可以使用JQuery做到这一点-但请不要这样做.
We can do it with JQuery - but please don't do this.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<body>
<script>
var name = '';
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Name = "John";
name = $scope.Name;
$scope.$watch('Name', function(newVal, oldVal){
name = newVal;
console.log(name);
});
});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input id="name" type="text" ng-model="Name"><br>
<br>
<textarea id="myText" ng-model="Name"></textarea>
</div>
<span id="fromQuery">to overrided</span>
<script>
$("#myText, #name").on("keyup", function() {
console.log("changed");
document.querySelector('#fromQuery').innerHTML = name;
});
</script>
</body>
</html>
好方法-
这是myCtrl控制器中的所有内容-
Here all things in myCtrl controller-
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Name = "John";
$scope.overrideName = 'to override';
$scope.getName = function(){
$scope.overrideName = $scope.Name;
}
});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input type="text" ng-model="Name" ng-keyup="getName()"><br>
<br>
<textarea id="myText" ng-model="Name" ng-keyup="getName()"></textarea>
<span id="fromQuery" >{{overrideName}}</span>
</div>
</body>
</html>
这篇关于使跨度对AngularJS应用的textarea有反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
