How to compare with global variables in ng-switch

Question

I use the AngularJS $rootScope object to expose some global constants that should be available for both controllers and presentation:

 var app = angular.module('myApp', []); app.run(function ($rootScope) { $rootScope.myConstant = 2; }); 

When I try to display a global value in a view, it works correctly:

 {{myConstant}} 

Equally, if I refer to a global value in ng-if state, it also works:

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

But when trying to use the same value for comparison in the ng-switch block, it never evaluates to true. This JSFiddle demonstrates my attempt to get this to work. I also tried to explicitly refer to a constant value as a member of $rootScope and as an expression (inside double curly braces), but nothing works.

Any ideas what I'm doing wrong?

Thanks,

Tim

Answer 1

You can always flip your own ... :)

(Not sure how effective this is, and it didn't pass the test, as I just wrote)

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

Instead of trying to set ng-switch-when , you can configure the ng-switch-on expression to get a specific value if myConstant is equal to 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 .