Come confrontare con le variabili globali in ng-switch

Question

Sto usando l'AngularJS $rootScope oggetto da esporre alcune costanti globali che devono essere accessibili a entrambi i controller e le viste:

var app = angular.module('myApp', []); 

app.run(function ($rootScope) { 
    $rootScope.myConstant = 2; 
}); 

Quando si tenta di rendere un globale valore in una vista, funziona correttamente:

{{myConstant}} 

Analogamente, se riferimento al valore globale in una condizione ng-if funziona anche:

<span ng-if="someValue == myConstant">Conditional content</span>. 

Tuttavia, quando si tenta di utilizzare lo stesso valore per il confronto all'interno di un blocco ng-switch, non viene mai valutato true. This JSFiddle dimostra il mio tentativo di farlo funzionare. Ho anche provato a fare riferimento esplicitamente al valore costante come membro di $rootScope e come espressione (all'interno di doppie parentesi graffe) ma non funziona.

Qualche idea su cosa sto facendo male?

Grazie,

Tim

Answer 1

Si può sempre rotolare il proprio ... :)

(non so come efficace questo è e non è ben collaudato, come ho appena scritto)

http://jsfiddle.net/H45zJ/1/

app.directive('wljSwitch', function() { 
    return { 
     controller: function ($scope) { 
      var _value; 
      this.getValue = function() { 
       return _value; 
      }; 
      this.setValue = function (value) { 
       _value = value; 
      }; 

      var _whensCount = 0; 
      this.addWhen = function (value) { 
       _whensCount++; 
      } 
      this.removeWhen = function (value) { 
       _whensCount--; 
      } 
      this.hasWhens = function() { 
       return _whensCount < -1; 
      }; 
     }, 
     link: function (scope, element, attrs, controller) { 
      scope.$watch(function() { 
       return scope.$eval(attrs.wljSwitchOn); 
      }, function (value) { 
       controller.setValue(value); 
      }); 
     } 
    }; 
}); 

app.directive('wljSwitchWhen', function() { 
    return { 
     require: '^wljSwitch', 
     template: '<span ng-transclude></span>', 
     transclude: true, 
     replace: true, 
     link: function (scope, element, attrs, controller) { 
      scope.$watch(function() { 
       return controller.getValue() === scope.$eval(attrs.wljSwitchWhen); 
      }, function (value) { 
       if (value) { 
        controller.addWhen();   
       } else { 
        controller.removeWhen();  
       } 
       element.attr('style', value ? '' : 'display:none;'); 
      }); 
     } 
    }; 
}); 

app.directive('wljSwitchDefault', function() { 
    return { 
     require: '^wljSwitch', 
     template: '<span ng-transclude></span>', 
     transclude: true, 
     replace: true, 
     link: function (scope, element, attrs, controller) { 
      scope.$watch(controller.hasWhens, function (value) { 
       element.attr('style', value ? '' : 'display:none;'); 
      }); 
     } 
    }; 
}); 

Answer 2

Invece di cercare di impostare ng-switch-when, è possibile personalizzare ng-switch-on espressione al fine di produrre valore specifico quando myConstant uguale item.value:

<span ng-switch on="{true:'const', false: item.value}[myConstant == item.value]"> 
    <span ng-switch-when="const"> 
     <span class="blue">{{item.name}}</span> (emphasis applied by ng-switch) 
    </span> 
    <span ng-switch-when="4"> 
     <span class="red">{{item.name}}</span> (emphasis applied by ng-switch) 
    </span> 
    <span ng-switch-default> 
     {{item.name}} 
    </span> 
</span> 

Working example.