Применить $ digest к конкретной директиве - PullRequest
Новая
       11

Применить $ digest к конкретной директиве

1 голос
/ 03 июля 2019

Я пытаюсь сделать часы, используя 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 File 

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!!.....

1 Ответ

0 голосов
/ 03 июля 2019

Это нормальное поведение, когда мы используем $ interval .

. Обычно Angular перерисовывает все в $ rootScope. $ Digest (), который вызывается $ scope. $ Apply (), $ интервал и т. д.

Но есть один бэкдор для этой проблемы, чтобы повторить рендеринг некоторой части кода. В вашем случае часы .

Разделите ваши взгляды на разные области.

Например: - Часы, которые обновляются каждые 1000 мс (1 секунда), могут находиться в собственном контроллере., отделяя его от сферы применения тяжелой директивой. В вашем случае функция 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);
    }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...