AngularJS 지시문 - 스타일을 전환하려면 nw-repeat의 ng 클래스가 $ watcher이어야합니까?

Question

현재 각도 지시문 등에 대한 이해를 높이기 위해 스파이크를 구현 중입니다.

전제 조건은 여러 통화 쌍에 대해 FX 감시 목록을 만드는 것입니다.

내 데이터 피드는 socket.io를 통해 가격 업데이트를 위해 설정됩니다.

내가 가지고있는 장애물은 가격 변동에 따라 CSS를 바꿀 수 있습니다 (즉 위로 화살표는 위로, 아래로 화살표는 아래로).

저는 감시자 기능이 필요하다고 생각하지만 시작해야 할 곳에서 고생하고 있습니다. 일을 수행하기 위해 일종의 표현을 찾고 있었지만 ... 방법은 $ 감시자처럼 보이기 시작하지 않았습니다. 내 지침에서 이전 가격을 범위로 저장하면 각 가격에 하나가 아닌 이전 값이 하나만 있다는 의미이기 때문에 결함이있었습니다.

내 질문에 : 솔루션은 ng-class 또는 $ watcher 기능 설정 중입니까?

Heres는 내 코드 ...

HTML 템플릿

<div ng-repeat="rate in rates" ng-click="symbolSelected(rate)"> 
     <div class="col-1-4"> 
      {{rate.symbol}} 
     </div> 
     <div class="col-1-4"> 
      <span ng-class='bullBear(rate.bidPoint)' ></span> {{rate.bidBig}}<span class="point">{{rate.bidPoint}}</span> 
     </div> 

     <div class="col-1-4"> 
      <span ng-class='bullBear(rate.offerPoint)' ></span> {{rate.offerBig}}<span class="point">{{rate.offerPoint}}</span> 
     </div> 

     <div class="col-1-4"> 
      {{rate.timeStamp | date : 'hh:mm:ss'}} 
     </div> 

    </div> 

내 지시어는 현재 언급 한 바와 같이이 작동하지 않습니다와 bullBear 방법은 $ 감시자처럼 보이기 시작했다 ... 다음과 같습니다

기능.

.directive('fxmarketWatch', function(fxMarketWatchPriceService){ 

     return { 

      restrict:'E', 
      replace:'true', 
      scope: { }, 

      templateUrl:'common/directives/fxMarketWatch/marketwatch.tpl.html', 

      controller : function($scope, SYMBOL_SELECTED_EVT,fxMarketWatchPriceService){ 

       $scope.symbolSelected = function(currency){ 
        $scope.$emit(SYMBOL_SELECTED_EVT,currency); 
       } 

       $scope.bullBear = function(newPrice){ 


        if ($scope.oldPrice> newPrice){ 

          return ['glyphicon glyphicon-arrow-down','priceDown']; 
        } 
        else if ($scope.oldPrice > newPrice){ 

          return ['glyphicon glyphicon-arrow-up','priceUp']; 
        } 

       } 


       $scope.$on('socket:fxPriceUpdate', function(event, data) { 

        $scope.rates = data.payload; 

       }); 
      } 

     } 

    }) 

Answer 1

난 당신이 ng-class 및 $watcher를 모두 사용하는 것이 좋습니다 것입니다. 두 실제로 서로를 칭찬 할 수

가 UPDATE : 코드가 ng-repeat 작동하려면, 우리는 또 다른 controller에 CSS 클래스 로직을 모두 마이그레이션해야합니다

app.controller('PriceController', function($scope) { 
    // we first start off as neither up or down 
    $scope.cssBid = 'glyphicon'; 
    $scope.cssOffer = 'glyphicon'; 

    var cssSetter = function(newVal, oldVal, varName) { 
     if (angular.isDefined(oldVal) && angular.isDefined(newVal)) { 
      if (oldVal > newVal) { 
       $scope[varName] = 'glyphicon glyphicon-arrow-down priceDown'; 
      } else if (newVal > oldVal) { 
       $scope[varName] = 'glyphicon glyphicon-arrow-up priceUp'; 
      } else { 
       $scope[varName] = 'glyphicon'; 
      } 
     } 
    }; 

    // watch for change in 'rate.bidPoint' 
    $scope.$watch('rate.bidPoint', function(newVal, oldVal) { 
     cssSetter(newVal, oldVal, 'cssBid'); 
    }); 
    // watch for change in 'rate.offerPoint' 
    $scope.$watch('rate.offerPoint', function(newVal, oldVal) { 
     cssSetter(newVal, oldVal, 'cssOffer'); 
    }); 
}); 

다음, 우리는이 PriceController 바인딩 divdiv에 있습니다. 이렇게하면 Angular는 각 rate에 대해 controller 인스턴스를 만들고 rates에 넣습니다.

이제

<div ng-repeat="rate in rates" ng-click="symbolSelected(rate)" ng-controller="PriceController"> 
    <div class="col-1-4"> 
     <span ng-class='cssBid'></span> {{rate.bidBig}}<span class="point">{{rate.bidPoint}}</span> 
    </div> 

    <div class="col-1-4"> 
     <span ng-class='cssOffer'></span> {{rate.offerBig}}<span class="point">{{rate.offerPoint}}</span> 
    </div> 
</div> 

이 지침의 컨트롤러가 이전보다 훨씬 짧아집니다 : 내 데이터 구조 조정 후

controller: function($scope, SYMBOL_SELECTED_EVT, fxMarketWatchPriceService){ 
    $scope.symbolSelected = function(currency) { 
     $scope.$emit(SYMBOL_SELECTED_EVT, currency); 
    } 

    $scope.$on('socket:fxPriceUpdate', function(event, data) { 
     $scope.rates = data.payload; 
    }); 
} 

Answer 2

당신은 ng-class을 수정할 수 있으며, 스타일과 배치 클래스가 코드에서 수행하지 않아야하기 때문에, 뷰에 논리를 이동합니다.

<div class="col-1-4"> 
    <span class="glyphicon" ng-class="{'glyphicon-arrow-up priceUp': oldPrice > rate.bidPoint, 'glyphicon-arrow-down priceDown':oldPrice > rate.bidPoint}"></span> {{rate.bidBig}}<span class="point">{{rate.bidPoint}}</span> 
</div> 

또는 같은

:

<span class="glyphicon {{oldPrice > rate.bidPoint ? 'glyphicon-arrow-down priceDown':'glyphicon-arrow-up priceUp'}}></span> {{rate.bidBig}}<span class="point">{{rate.bidPoint}}</span>