2016-03-31 28 views
0

DOM sınıfını değiştirmek için ng-class kullanımı hakkında bir sorum var. Düğmelerin çoğu, "İki Göz Kırpma" düğmesi dışında iyi çalışır. Zaten $ kapsamı diye adlandırdım. $ Digest, ancak setTimeout 500ms üzerindeki etkisini göremiyorum. Niye ya?

Herhangi bir yardım için teşekkür ederiz!

HTML Kod

<html> 
    <title> 
     Angular Blink Test 
    </title> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
    <script src="app.js"></script> 

    <body ng-app='app'> 
     <style> 
      .bk_red {background-color:red;} 
      .bk_blue {background-color:blue;} 
     </style> 

     <div ng-class='{bk_red: isRed, bk_blue:!isRed}' ng-controller='myController'> 
      <button ng-click='buttonClick0()'>Check</button> 
      <button ng-click='buttonClick1()'>One Blink</button> 
      <button ng-click='buttonClick2()'>Two Blink</button> 
      <button ng-click='buttonClick3()'>HTTP</button> 
     </div> 
    </body> 
</html> 

JavaScript Kod

(function() { 
    'use strict'; 
    // this function is strict... 

    var app = angular.module('app', []).controller('myController', function ($scope, $http) { 
     $scope.isRed = false; 

     $scope.buttonClick0 = function() { 
      alert('isRed=' + $scope.isRed); 
     }; 

     $scope.buttonClick1 = function() { 
      $scope.isRed = !$scope.isRed; 
      console.log('buttonClick1 isRed:', $scope.isRed); 
     }; 

     $scope.buttonClick2 = function() { 
      $scope.isRed = !$scope.isRed; 
      console.log('buttonClick2 isRed-1:', $scope.isRed); 
      setTimeout(function() { 
       $scope.isRed = !$scope.isRed; //change again, but NOT working! 
       $scope.$digest; //I guess something else should be done here. 
       console.log('buttonClick2 isRed-2:', $scope.isRed); 
      }, 500); 
     }; 

     $scope.buttonClick3 = function() { 
      $scope.isRed = !$scope.isRed; 
      console.log('buttonClick3 isRed-1:', $scope.isRed); 
      $http(
       { 
        method: 'GET', 
        url: '/data.js' 
       }). 
       then(function successCallback(response) { 
        $scope.isRed = !$scope.isRed; 
        console.log('buttonClick3 isRed-2:', $scope.isRed); 
       }, function errorCallback(response) { 
        $scope.isRed = !$scope.isRed; 
        console.log('buttonClick3 isRed-3:', $scope.isRed); 
       }); 
     } 
    }); 
}()); 

http://plnkr.co/edit/z1DGyAvZMKP3zgoqSawH?p=preview

+0

Kullan $ aralığı veya $ yerine aşımı. Kapsamınız bozulduğunda iptal etmeyi unutmayın. –

+0

Evet, $ zaman aşımı çalışacaktır. Ama başka bir iş parçacığı taklit etmek için setTimeout kullanıyorum. – Elitward

+0

$ aralık veya $ zaman aşımı kullanmamanın bir yolu var mı? Angular.JS'yi her şey için tekrar kirli olup olmadığını kontrol etmek istiyorum. – Elitward

cevap

1

Sen $ kapsamını araman gerekiyor. $ Özetini() Bir özet başlaması istiyorsanız sindirmek yerine $ daha Çevrim.

Yapılması gereken en önemli şey, setTimeout yerine $ timeout kullanmaktır. Bu açısal sindirim döngüsü içindeki değişiklikleri düzgün uygular.

https://docs.angularjs.org/api/ng/service/ $ zaman aşımı

+0

Yardımlarınız için teşekkürler! Test kodunda çalışır. Tekrar teşekkürler! – Elitward

İlgili konular