Question

HTML中的

：

<td ><div class="ledborder"><div class="led" ng-class="GetLedClass('led1')"/></div></td>     
<td ><div class="ledborder"><div class="led" ng-class="GetLedClass('led2')"/></div></td> 
<td ><div class="ledborder"><div class="led" ng-class="GetLedClass('led3')"/></div></td> 
<td ><div class="ledborder"><div class="led" ng-class="GetLedClass('led4')"/></div></td> 
<td ><div class="ledborder"><div class="led" ng-class="GetLedClass('led5')"/></div></td>

在控制器中：

var ledColorToBg = {'off':'dis_bg', 'red':'red_bg', 'green':'green_bg', 'orange':'orange_bg'};

$scope.GetLedClass = function(module){

    var retClass='';
    var color;

    if ($scope.ledsInfo == null){
        retClass = ledColorToBg['off'];
    }        
    else if ($scope.ledsInfo.systemError){
        retClass = 'red_bg blink';
    }
    else{        
        switch(module){
            case 'led1':
                color = $scope.ledsInfo.led1.led;
                break;

            case 'led2':
                color = $scope.ledsInfo.esxi.led2.led;
                break;

            case 'led3':
                color = $scope.ledsInfo.esxi.led3.led;
                break;

            case 'led4':
                color = $scope.ledsInfo.batteries.led4.led;
                break;

            case 'led5':
                color = $scope.ledsInfo.batteries.led5.led;
                break;

            default:
                break;
        }

        retClass = ledColorToBg[color.color];

        if (color.blink)
            retClass += ' blink';
    }

    return retClass;
}

$ scope.ledsInfo每4秒更新一次。在某些情况下（不是100％可重现），$ scope.GetLedClass返回预期值，但led类（由元素颜色反映）不会在视图上更新。当我检查HTML元素时，我看到了正确/期望/更新的类值，但它没有在视图上呈现。

我知道这不是语法问题，因为它大部分时间都在运作。

我试图把这个函数放在$ timeout中，但它只是让事情变得更糟：没有更新任何元素。

我试图把这个函数放在$ setTimeout中，但它和$ timeout一样。

我尝试保留5个范围变量，在更新$ scope.ledsInfo时更新，因此ng-class将绑定到这些变量，如下所示：

<td ><div class="ledborder"><div class="led" ng-class="{{ledClass.led1}}"/></div></td>     
<td ><div class="ledborder"><div class="led" ng-class="{{ledClass.led2}}"/></div></td> 
<td ><div class="ledborder"><div class="led" ng-class="{{ledClass.led3}}"/></div></td> 
<td ><div class="ledborder"><div class="led" ng-class="{{ledClass.led4}}"/></div></td> 
<td ><div class="ledborder"><div class="led" ng-class="{{ledClass.led5}}"/></div></td>

但它也不起作用。

我在这里做错了什么？感谢。

Answer 1

我想发表评论，但我的声誉还不够。所以..

如何尝试使用$scope.$apply(function(){});或$digest或$watch

（AngularJS）ngClass分配有正确的字符串值，但未在视图上更新

1 个答案: