これが私のコードです
<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使うべきではないonclickとng-click＆setIntervalに$intervalこのすべては、角度コントローラの内側に嘘になりますが。外部のAngularコンテキストからネイティブメソッドを使用すると、ダイジェストサイクルが実行されないため、Angularのバインディングを更新する際に問題が発生します。その場合、サイクルを手動でダイジェストするために実行する必要があります。これは、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;
}
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加