使span响应AngularJS应用程序的文本区域_Angularjs_Textarea

使span响应AngularJS应用程序的文本区域

angularjs

使span响应AngularJS应用程序的文本区域,angularjs,textarea,Angularjs,Textarea,我有以下代码：： var-app=angular.module（'myApp'，[]）；应用程序控制器（'myCtrl'，函数（$scope）{ $scope.Name=“John”； }); 名称：推翻 $（“#myText”）。在（“更改键控粘贴”，函数（）上{ 控制台日志（“更改”）； var x=document.querySelector（“#myText”）； console.log（x.textContent）； document.querySelector（'#fromQ

我有以下代码：：


var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.Name=“John”；
});
名称：



推翻
$（“#myText”）。在（“更改键控粘贴”，函数（）上{
控制台日志（“更改”）；
var x=document.querySelector（“#myText”）；
console.log（x.textContent）；
document.querySelector（'#fromQuery'）.innerHTML=x.innerText
});

我想实现两件事：

1）对

input

的更改应该会影响

textarea

，反之亦然，AngularJS已经意识到了这一点

2）对

textarea

的更改（由于

输入的更改或手动修改）应影响span
。它目前不起作用，属性textContent
或innerText
或innerHTML
不起作用
有人知道这里出了什么问题吗
此外，将onchange事件集成到myApp
中是否也是一种更好的做法
 它正在工作，：-
document.querySelector('#fromQuery').innerHTML = x.value; 

它正在工作，：-
document.querySelector('#fromQuery').innerHTML = x.value; 

如果希望文本区域中的更改反映在跨度中，请观察文本区域模型。在此之前，请将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>

如果希望文本区域中的更改反映在跨度中，请观察文本区域模型。在此之前，请将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>

最好的做法是永远不要在控制器内使用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>


变量名=“”；
var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.Name=“John”；
name=$scope.name；
$scope.$watch（'Name'，函数（newVal，oldVal）{
name=newVal；
console.log（名称）；
});
});
名称：



凌驾
$（“#myText，#name”）。在（“keyup”，function（）上{
控制台日志（“更改”）；
document.querySelector（'#fromQuery'）.innerHTML=name；
});

好方法-
这里是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>


var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.Name=“John”；
$scope.overrideName='to override'；
$scope.getName=function（）{
$scope.overrideName=$scope.Name；
}
});
名称：



{{overrideName}}
最佳实践是永远不要在控制器内使用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>


变量名=“”；
var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.Name=“John”；
name=$scope.name；
$scope.$watch（'Name'，函数（newVal，oldVal）{
name=newVal；
console.log（名称）；
});
});
名称：



凌驾
$（“#myText，#name”）。在（“keyup”，function（）上{
控制台日志（“更改”）；
document.querySelector（'#fromQuery'）.innerHTML=name；
});

好方法-
这里是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>


var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.Name=“John”；
$scope.overrideName='to override'；
$scope.getName=function（）{
$scope.overrideName=$scope.Name；
}
});
名称：



{{overrideName}}
对输入或文本区域的更改将影响跨度，因为两个控件都绑定到一个模型属性。你为什么不把span移到你的控制器范围内，用{{Name}}
代替来覆盖
我对AngularJS很陌生。实际上，在span
的地方，我有一个大程序。因此，我想知道将此过程与AngularJS应用程序分离，并通过textarea的onchange事件触发该过程是否是一种可行的做法。是否有任何具体原因将“span”排除在控制器范围之外？我以span
为例；事实上，我有很多代码对文本区域的变化做出反应。现在我需要将输入
和文本区域
包装在AngularJS控制器中，因此我想知道如何处理初始的“大量代码”。您是否从任何其他源加载所有初始代码？或者是如何做到的？如果这是由您编写的，您可以将其全部放在控制器范围内，并创建一个模型对象，以基于文本区域值操纵其值。对输入或文本区域的更改将影响跨度，因为两个控件都绑定到一个模型属性。你为什么不把span移到你的控制器范围内，用{{Name}}
代替来覆盖
我对AngularJS很陌生。实际上，在span
的地方，我有一个大程序。因此，我想知道将此过程与AngularJS应用程序分离，并通过textarea的onchange事件触发该过程是否是一种可行的做法。是否有任何具体原因将“span”排除在控制器范围之外？我以span
为例；事实上，我有很多代码对文本区域的变化做出反应。现在我