AngularJS: एनजी शो प्रदर्शन बनाम: कोई नहीं

Question

मैं एक का उपयोग मामला था जिससे मैं इस प्रकार के रूप में डिफ़ॉल्ट सीएसएस का उपयोग करके छिपा किसी HTML तत्व रखने के लिए:

HTML:

<div class="item"> 
</div> 

सीएसएस:

.item { 
    display: none; 
} 

लेकिन, मुझे एनजी शो का उपयोग कर तत्व की दृश्यता टॉगल करने के लिए पृष्ठ के लोड होते के बाद इस प्रकार की जरूरत है:

<div class="item" ng-show="show_element"> 
</div> 

लेकिन, यदि $scope.show_element सत्य पर सेट किया गया है, तो तत्व दिखाई नहीं देता है, यानी, सीएसएस संपत्ति AngularJS 'ng-show को ओवरराइड कर रही है। वहाँ किसी भी तरह से अधिक प्राथमिकता एनजी-दिखाने देने के लिए है?

इसके अलावा, आपको लगता है कि मैं $scope.show_element को इसे छिपाने के लिए शुरुआत में झूठी रख सकता हूं। लेकिन उस मामले में, मैं तत्व की एक बहुत ही कम झलक मिल जब पेज लोड हो रहा है जो देखने की UX बिंदु से अच्छा नहीं है। यह आपके मामले में काम करने के लिए

Answer 1

एक तरह से ng-class का उपयोग करेंगे जहां मामले में जब तत्व आपको दिखाई दे रही display: block यानी सही प्रदर्शन संपत्ति के साथ वर्ग आवेदन कर सकते हैं होना चाहिए और यदि आप धीमी गति से बूटस्ट्रैप से ग्रस्त आप ng-cloak जांच दस्तावेज़ यहाँ https://docs.angularjs.org/api/ng/directive/ngCloak उपयोग कर सकते हैं

Answer 2

मैं बस वर्ग बदल जाएगा। एनजी शो समारोह बस जोड़ सकते हैं या एनजी-हाइड वर्ग है, जो केवल propertie है एक दूर करने के लिए है! "प्रदर्शन: कोई नहीं महत्वपूर्ण,"। यह कक्षाओं के सीएसएस बदलने के लिए बयान नहीं है।

क्या आप बस कर सकता है कुछ इस तरह है:

<div class="{{element_class}} item"> 
</div> 

और प्रदर्शन के साथ अपनी कक्षा में element_class सेट: ब्लॉक;

कार्य उदाहरण: http://codepen.io/GriessbreiLP/pen/EVXQjK

आशा यह आप मदद कर सकता है।

संपादित करें: नाह, बहुत धीमी, पहले से ही दो बार उल्लेख किया गया है।

Answer 3

एक और सरल विकल्प

style="{{show_element?'display:block !important':'display:none !important'}}" 

Answer 4

तुम सिर्फ आइटम को छिपाने के लिए इतना है कि आप पर लोड एक फ्लैश नहीं मिलता है की कोशिश कर रहे हैं, तो बजाय .item वर्ग display:none करने के लिए सेट का उपयोग कर के, आप बस ng-show पर साथ तत्व को .ng-hide के एक वर्ग तैयार कर सकते हैं।

AngularJS जोड़ने या DOM एलीमेंट का .ng-hide के एक वर्ग को हटाने के द्वारा ng-show काम करता निर्देश। .ng-hide वर्ग नियम display: none !important;

<div class="ng-hide" ng-show="showElement">...</div>