角度カルーセルとディレクティブスコープの問題

Question

問題を示すために単純なPlunkerを作成しました。

私はローカルタイマーをインクリメントするために1秒ごとに更新する隔離されたスコープのディレクティブを持っています。私は隔離された範囲が他の何にも影響しないことを期待していました。

Plunkerの例では、親のスコープの値が更新されていないことがわかりますが、1秒ごとにカルーセルが「リフレッシュ」されています。これが正しい角度の用語ではないが、私はまだ学んでいます。

これは私のディレクティブコードです：

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

私は最終的に、このの底に持っています。問題はカルーセルではなく、$ rootScope。$ apply（）を引き起こしていた$ intervalタイマーです。

$ intervalシグネチャは関数の間隔（fn、delay、count、invokeApply）です。したがって、invokeApplyをfalseとして渡すと、これが起こらないようになります。

Answer 2

あなたのPlunkerでは、いくつかのものが正しく表示されません。

1. このような関数は、悪い考えです。 <p>{{hurro()}}</p>

2. タイマーの作成にディレクティブを使用しません。 $ intervalはすでにあなたのためにタイミングを取っています。このようにjsスクリプトを変更することができます。 タイマー指令を完全に削除し、$ intervalをコントローラに追加し、追加したRepeat関数からhurroを呼び出します。
   hurro（）がCarouselリフレッシュとは独立して呼び出されることがわかります。

   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(); 
   

   }