angularjs页面没有实时反馈值的改变

bravility
  • 239

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.该部分代码理论上应该实现页面1s内动态随机内容的效果,但是实际效果是1s后才显示最终的值,这1s内变化的值都没有表现出来。
如何能实现1s内动态随机内容的效果?

回复
阅读 2k
3 个回答

偶然发现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)
        };

需要调用下$scope.$apply(),进入到angularjs上下文环境,它会执行脏值检测,会检测到值的改动,或者用$timeout,它会自动调用$apply()方法

之所以有一秒延迟是因为你使用的时候外部方法,如果你使用 $timeout就不会出现这个问题,或者你使用外部方法之后进行一下脏值检测。也就是在方法最后写一个 $scope.$apply()

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏