Angular UI旋转木马和指令范围问题

我创建了一个简单的Plunker来演示此问题。Angular UI旋转木马和指令范围问题

我有一个隔离范围的指令，每隔一秒更新一次以增加一个本地定时器。我期待孤立的范围不会影响其他任何东西。

在Plunker的例子中，我可以看到父母的范围值没有被更新，但是每一秒轮播被刷新。道歉，如果这不是正确的角度术语，但我还在学习。

这是我的指令代码：

app.directive('timer', ['$interval', function ($interval) { 

    function link(scope, element, attrs) { 
     var timeoutId; 

     element.on('$destroy', function() { 
      $interval.cancel(timeoutId); 
     }); 

     // start the UI update process; save the timeoutId for canceling 
     timeoutId = $interval(function() { 
      scope.seconds++; 
     }, 1000); 
    } 

    return { 
     link: link, 
     scope: { 
      seconds: '@' 
     }, 
     template: '<div>Isolated: {{seconds}}</div>' 

    }; 
}]);

如何确保定时器不会导致转盘的刷新？

来源

2016-08-22 Dave Barker

旋转木马刷新方式是什么？当我运行猛击队员时，一切看起来都很正常。 – plong0

hurro（）函数是每秒调用一次的benig，被调用的函数会递增并显示在传送带下方。 –

我终于得到了这条底线。问题不是传送带，而是引起$ rootScope。$ apply（）的$ interval计时器。

$ interval签名是函数间隔（fn，delay，count，invokeApply），因此将invokeApply作为false传递以防止发生此情况。

来源

2016-08-24 03:27:51

有些东西看起来不合适您的Plunker。

绑定这样的函数是一个坏主意。 <p>{{hurro()}}</p>

我不使用指令来制作计时器。 $美元的时间间隔已经为你做好时机你可以像这样修改你的js脚本。完全删除timer指令，将$ interval添加到您的控制器，并从我添加的Repeat函数调用hurro。
你会看到独立于Carousel刷新调用hurro（）。

function CarouselDemoCtrl($scope, $interval) { 
    $scope.myInterval = 0; 
    $scope.called=0; 
    $scope.called2=0; 
    $scope.mySeconds=10; 
    var slides = $scope.slides = []; 
    $scope.addSlide = function() { 
    var newWidth = 600 + slides.length; 
    slides.push({ 
     image: 'http://placekitten.com/' + newWidth + '/300', 
     text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' + 
     ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4] 
    }); 
    }; 
    for (var i=0; i<4; i++) { 
    $scope.addSlide(); 
    }

$ scope.hurro =函数（）{$ scope.called = $ scope.called + 1; （“＃called”）。html（$ scope.called）; }

 var refresh; 
    $scope.Repeat = function() { 
     refresh = $interval(function() { 
      console.log("refresh at " + new Date().toString()); 
      $scope.hurro(); 
     }, 1000); 
    } 
    $scope.Repeat();

}

来源

2016-08-23 00:59:55

1.功能是突出问题2.定时器指令是一个非常简化的版本来说明问题。 –

我不确定是什么原因引起的问题2，但我能够轻松地复制它。该柜台每秒增加约10次。我的猜测是你无意中做了一个递归循环，或者Angular每秒钟多次观看范围变化和/或Web事件。 –

Angular UI旋转木马和指令范围问题

回答

相关问题