为什么使用setInterval（）方法时，angularJS无法侦听文本输入？

这里是我的代码为什么使用setInterval（）方法时，angularJS无法侦听文本输入？

<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秒的定时器。但是当我按下渲染按钮时，背景颜色的身体保持不变。

来源

2015-06-13 Prinz Km

非常需要使用角模块化方法创建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; 
    } 
});

来源

2015-06-13 19:08:38

感谢。它工作。我是angularJS的新手。 –

@PrinzKm很高兴帮助你..谢谢:) –

为什么使用setInterval（）方法时，angularJS无法侦听文本输入？

回答

相关问题