Jak porównać przeciwko zmiennych globalnych w ng-switch

Question

Używam angularjs $rootScope obiektu, aby odsłonić pewne zmienne globalne, które powinny być dostępne dla obu kontrolerów i widoków:

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

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

Gdy próbuję uczynić globalną wartość w widoku, to działa prawidłowo:

{{myConstant}} 

Podobnie, jeśli odwołać się do wartości globalnej w warunkach ng-if działa również:

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

Jednak przy próbie użycia tej samej wartości do porównania w bloku ng-switch, nigdy nie jest równa true. This JSFiddle demonstruje moją próbę uzyskania tego działa. Próbowałem również jawnie odwoływać się do stałej wartości jako członek $rootScope i jako wyrażenie (wewnątrz podwójnych nawiasów klamrowych), ale nic nie działa.

Jakieś pomysły, co robię źle?

Dzięki,

Tim

Answer 1

Można zawsze toczyć własną rękę ... :)

(nie wiem, jak skuteczne jest to i nie jest dobrze przetestowane jak ja przed chwilą napisałem)

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

Zamiast próbować ustawić ng-switch-when, można dostosować ng-switch-on ekspresji w celu wytworzenia określonej wartości, gdy myConstant równa 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.