使 span 对 AngularJS 应用程序的文本区域具有反应性

Question

我有以下代码：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.

已经实现了这一点

2) 对 textarea 的更改（由于 input 的更改或手动修改）应该会影响 span。目前不起作用，属性 textContent 或 innerText 或 innerHTML 不起作用。

有人知道这里出了什么问题吗？

此外，将 onchange 事件也集成到 myApp 中是否更好？

Answer 1

正在运行，:-

document.querySelector('#fromQuery').innerHTML = x.value;

Answer 2

如果您希望文本区域中的更改反映在跨度中，请观察文本区域模型。在此之前，将 span 标签包含在控制器范围内，并为其分配一个模型变量，如下所示：

Html :

<div ng-app="myApp" ng-controller="myCtrl">
     Name: <input type="text" ng-model="Name"><br>
    <br>
    <textarea id="myText" ng-model="Name"></textarea>
    <span id="fromQuery" ng-model="spanValue">to override</span>
</div>

控制器：

$scope.$watch("Name", function () {
  $scope.spanValue = $scope.Name;
});

Answer 3

最佳做法是永远不要在控制器内部使用 JQuery 或 angular.element() 进行 DOM 操作。控制器仅用于我们的业务逻辑。我们可以在其中使用服务、工厂、$scope、值、常量等。

方法不对 -

我们可以用 JQuery - 但请不要这样做。

<!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 控制器中的所有东西-

<!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>

使 span 对 AngularJS 应用程序的文本区域具有反应性

Make span reactive to a textarea of an AngularJS app

textarea

angularjs