Question

我创建了一个简单的Plunker来证明这个问题。

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

在Plunker示例中，我可以看到父母范围值未被更新，但每一秒钟轮播正在刷新＆＃39;。抱歉，如果这不是正确的角度术语，但我还在学习。

这是我的指令代码：

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>'

    };
}]);

如何确保计时器不会刷新轮播？

Answer 1

有些事情在你的Plunker中看起来不对。

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

我没有使用指令来制作计时器。 $ interval已经为你准备好了。您可以像这样修改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 = function（）{ $ scope.called = $ scope.called + 1; $（＆＃34;＃称为＆＃34）。HTML（$ scope.called）; }

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

}

Answer 2

我终于明白了这一点。问题不在于轮播而是$ interval计时器导致$ rootScope。$ apply（）。

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

Angular ui轮播和指令范围问题

2 个答案: