爲什麼使用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無法偵聽文本輸入？

回答

相關問題