Wie gegen die globalen Variablen in ng-Schalter vergleichen

Question

ich den AngularJS $rootScope Objekt verwenden einige globalen Konstanten zu machen, die beide zu Controllern und Ansichten zugänglich sein müssen:

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

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

Wenn ich ein globalen zu machen versuchen, Wert in einer Ansicht, es funktioniert einwandfrei:

{{myConstant}} 

Ebenso, wenn ich den globalen Wert in einem ng-if Zustand Referenz funktioniert es auch:

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

Wenn jedoch versucht wird, denselben Wert für den Vergleich innerhalb eines ng-switch Blocks zu verwenden, wird der Wert nie als wahr ausgewertet. This JSFiddle zeigt meinen Versuch, das funktioniert zu bekommen. Ich habe auch versucht, explizit auf den konstanten Wert als Mitglied von $rootScope und als Ausdruck (innerhalb von geschweiften Klammern) zu verweisen, aber nichts funktioniert.

Irgendwelche Ideen, was ich falsch mache?

Danke,

Tim

Answer 1

Sie können immer Ihre eigene Rolle ... :)

(nicht sicher, wie effizient das ist und es ist nicht gut getestet, wie ich es gerade jetzt geschrieben)

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

Anstatt zu versuchen, ng-switch-when zu setzen, Sie ng-switch-on Ausdruck, um anpassen können bestimmten Wert zu erzeugen, wenn myConstantitem.value gleich:

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