Question

我目前正在实施一个尖峰，以进一步理解角度指令等。

前提是在多个货币对上创建一个FX观察名单。

我的数据Feed已设置为通过socket.io进行价格更新。

我所遇到的绊脚石是能够根据价格变化改变css，即向上箭头向上，向下箭头向下。

我觉得观察者功能是我需要的但是在哪里开始努力，所以在ng-class中寻找某种表达来完成这项工作......但这种方法不仅开始看起来像一个$ watcher它也有缺陷，因为在我的指令中将先前的价格保存到范围意味着每个价格只有一个旧值而不是一个。

我的问题是：解决方案是ng-class还是设置$ watcher函数？

继承我的代码......

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方法开始看起来像$ watcher函数。

.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并将逻辑移动到视图中，因为样式和放置类不应该在代码中完成。

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

Answer 2

我建议您同时使用ng-class和$watcher。这两个人实际上可以相互称赞：

更新：要使代码与ng-repeat一起使用，我们需要将所有CSS类逻辑迁移到另一个controller：

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绑定到ng-repeat div。通过这样做，Angular将为controller中的每个rate创建一个rates实例。所以这次rate.bidPoint和rate.offerPoint可用于$watch - ing：

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

AngularJS指令 - ng-repeat中的ng-class应该是切换风格的$ watcher？

2 个答案: