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操作。控制器仅用于我们的业务逻辑。我们可以在其中使用服务，工厂，美元范围，价值，常数等。

糟糕的方式 -

我们可以用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 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>

使span对AngularJS应用程序的textarea产生反应

3 个答案: