为什么 angularJS 在使用 setInterval(） 方法时无法侦听文本输入

Why angularJS fails to listen text input when using setInterval() method?

本文关键字：输入 文本 方法 angularJS setInterval 为什么      更新时间：2023-09-26

这是我的代码

   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<body ng-app="" style="background:{{val}};" id="body">
   <input type="text"  ng-model="val" id="color-input">
   <input type="button" onclick="render()" value="Render">
</body>
<script>
          function render(){
               setInterval(function(){myTimer()},5000);
          }
           var i=0;
           function myTimer() {
                if(i<4){
                    colors=["red","green","blue","grey"];
                    document.getElementById("color-input").value=colors[i];
                    i++;
                }
                else
                         i=0;
          }
</script>

我正在使用 5 秒的计时器。但是当我按下渲染按钮时，身体的背景颜色保持不变。

您需要

使用角度模块化方法的第一件事，方法是创建angular.module添加控制器，指令，过滤器等组件。然后在ng-app指令中提供该模块。此外，您不应使用选择器来获取输入字段的值，因为您已经将ng-model附加到该字段，这将使您在控制器范围内使用该值。

你不应该使用原生的javascript，它在角度上下文中不起作用，你需要用ng-click和setInterval替换onclick $interval这一切都将位于角度控制器中。通过使用来自外部角度上下文的本机方法，更新角度的绑定将产生问题，因为它们不会运行摘要循环。在这种情况下，您需要手动运行以消化循环，这在 Angular 中执行代码时被认为是非常糟糕的编码。

标记

<body ng-app="app" style="background:{{val}};" id="body" ng-controller="mainCtrl">
   <input type="text" ng-model="val" id="color-input">
   <input type="button" ng-click="render()" value="Render">
</body>

控制器

angular.module('app', [])
.controller('mainCtrl', function($scope, $interval) {
  //code here
  $scope.render = function() {
    $interval(function() {
      myTimer()
    }, 5000);
  }
  var i = 0;
  function myTimer() {
    if (i < 4) {
      colors = ["red", "green", "blue", "grey"];
      $scope.val = colors[i];
      i++;
    } else
      i = 0;
  }
});
相关文章：