एनजी स्विच में वैश्विक चर

Question

मैं AngularJS का उपयोग कर रहा $rootScope वस्तु कुछ वैश्विक स्थिरांक दोनों नियंत्रकों और विचारों के लिए सुलभ होने की जरूरत है कि बेनकाब करने के लिए के खिलाफ तुलना करने के लिए कैसे:

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

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

जब मैं एक वैश्विक रेंडर करने का प्रयास समान रूप से

{{myConstant}} 

, अगर मैं एक ng-if हालत में वैश्विक मूल्य का संदर्भ यह भी काम करता है:: किसी दृश्य में मूल्य, इसे सही ढंग से काम करता है

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

लेकिन, जब एक ng-switch ब्लॉक के भीतर की तुलना के लिए एक ही मूल्य उपयोग करने का प्रयास, यह कभी नहीं सही का आकलन। This JSFiddle यह काम करने के मेरे प्रयास को दर्शाता है। मैंने $rootScope के सदस्य और अभिव्यक्ति के रूप में निरंतर मान को स्पष्ट रूप से संदर्भित करने का भी प्रयास किया है (डबल घुंघराले ब्रेसिज़ के अंदर) लेकिन कुछ भी काम नहीं करता है।

कोई विचार क्या मैं गलत कर रहा हूं?

धन्यवाद,

टिम

Answer 1

तुम हमेशा अपने स्वयं के रोल कर सकता है ... :)

(सुनिश्चित नहीं हैं कि यह कैसे कुशल है और यह नहीं अच्छी तरह से परीक्षण किया है के रूप में मैं अभी-अभी यह लिखा था)

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

इसके बजाय ng-switch-when सेट करने की कोशिश की

आप विशिष्ट मूल्य का उत्पादन करने में ng-switch-on अभिव्यक्ति अनुकूलित कर सकते हैं जब myConstantitem.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।