Question

我正在尝试使用angular-js制作时钟。现在，我已经使用$interval构建了一个时钟，但是在每个间隔之后，其他$directive也都在刷新，这是我想限制的。

HTML文件

<body ng-app="defaultDashboard">
    <div ng-controller="timeDisplay">
        <span class="glyphicon glyphicon-bell nav-link navbar-textColor" id="clock"> {{time}} </span>
    </div>
    <div ng-controller="panel">
        {{ printName('hello man!!') }}
    </div>
</body>

角度文件

angular.module('defaultDashboard',[])
    .controller('timeDisplay'function($scope,$filter,$timeout,$interval){

    $scope.time = $filter('date')(new Date(), 'dd/MM/yyyy HH:mm:ss');     
    var timeRefresh = function(){
        $scope.time = $filter('date')(new Date(), 'dd/MM/yyyy HH:mm:ss');
    }
    $interval(timeRefresh,1000);
})

.controller('panel',function($scope,$timeout){
    $scope.printName = function(string){
        console.log(string);
    }
});

时钟工作正常，但在控制台中，每秒打印一次：

hello man!!
hello man!!
hello man!!
hello man!!.....

Answer 1

当我们使用 $ interval 时，这是正常现象。

Angular通常在$ rootScope。$ digest（）上重新渲染所有内容，这由$ scope。$ apply（），$ interval等调用。

但是，这个问题有一个后门，可以重复渲染部分代码。 以您的情况为准。

将视图分为不同的范围。

例如：-每1000毫秒（1秒）更新一次的时钟可以在其自己的控制器中，并通过Heavy指令将其与示波器分开。 您的情况是printName（）函数。

然后使用任何 无角度的其他JS间隔 （例如 setInterval（））代替$ interval 更新时钟，然后手动调用$ scope。$ digest（）。

例如：- 将您的JS文件更改为：

angular.module('defaultDashboard',[])
    .controller('timeDisplay'function($scope,$filter,$timeout,$interval){

    $scope.time = $filter('date')(new Date(), 'dd/MM/yyyy HH:mm:ss');     
    var timeRefresh = function(){
        $scope.time = $filter('date')(new Date(), 'dd/MM/yyyy HH:mm:ss');
    }

    // don't use $interval, it'll call $rootScope.$apply()
    // $interval(timeRefresh,1000);
    // Instead use setInterval with 1000ms value.
    setInterval(function () {
        timeRefresh();

        // digest only our scope, without re-rendering everything else.
        $scope.$digest();
    }, 1000);
})

.controller('panel',function($scope,$timeout){
    $scope.printName = function(string){
        console.log(string);
    }
});

在特定指令上应用$ digest

1 个答案: