鍍金池/ 問答/HTML5  網(wǎng)絡(luò)安全  HTML/ angularjs頁面沒有實(shí)時(shí)反饋值的改變

angularjs頁面沒有實(shí)時(shí)反饋值的改變

1.html部分

    <div>
        {{one}}
        <button ng-click="testMe()">click</button>
    </div>

2.js部分

        $scope.all=[
            1,2,3,4,5,6,7,8,9,0
        ];
        $scope.testRand = function () {
            $scope.one = [];
            for(var i = 0;i < 2; i++){
                var index = Math.floor(Math.random() * 10);
                $scope.one[i] = $scope.all[index];
                console.log($scope.one[i]);
            }
            return $scope.one
        };
        $scope.testMe = function () {
            var timmer =  null;
            setTimeout ( function(){
                clearInterval(timmer)
            } , 1000 );
            timmer = setInterval ( function (){
                $scope.testRand1();
            },33)
        };

3.該部分代碼理論上應(yīng)該實(shí)現(xiàn)頁面1s內(nèi)動態(tài)隨機(jī)內(nèi)容的效果，但是實(shí)際效果是1s后才顯示最終的值，這1s內(nèi)變化的值都沒有表現(xiàn)出來。
如何能實(shí)現(xiàn)1s內(nèi)動態(tài)隨機(jī)內(nèi)容的效果？

回答
編輯回答
淚染裳

之所以有一秒延遲是因?yàn)槟闶褂玫臅r(shí)候外部方法，如果你使用 $timeout就不會出現(xiàn)這個問題，或者你使用外部方法之后進(jìn)行一下臟值檢測。也就是在方法最后寫一個 $scope.$apply()

2017年12月21日 19:31
編輯回答
陌如玉

偶然發(fā)現(xiàn)setInterval 和 setTimeout 在angular中不可用，分別替換成$interval 和 $timeout即可，具體原因未知。
故解決以上問題，需要把代碼改成這樣

$scope.all=[
            1,2,3,4,5,6,7,8,9,0
        ];
        $scope.testRand = function () {
            $scope.one = [];
            for(var i = 0;i < 2; i++){
                var index = Math.floor(Math.random() * 10);
                $scope.one[i] = $scope.all[index];
                console.log($scope.one[i]);
            }
            return $scope.one
        };
        $scope.testMe = function () {
            var timmer =  null;
            $timeout( function(){
                $interval.cancel(timmer)
            } , 1000 );
            timmer = $interval( function (){
                $scope.testRand1();
            },33)
        };
2017年8月26日 13:13
編輯回答
安淺陌

需要調(diào)用下$scope.$apply(),進(jìn)入到angularjs上下文環(huán)境，它會執(zhí)行臟值檢測，會檢測到值的改動，或者用$timeout，它會自動調(diào)用$apply()方法

2017年4月6日 05:09