एनजी-क्लोक निर्देश बहुत जल्दी हटा दिया जाता है

Question

मेरे पास कुछ नियंत्रकों के साथ एक कोणीय-जेएस ऐप है जिसे प्रारंभ में नहीं दिखाया जाना चाहिए। एनजी-क्लोक के उपयोग के बावजूद वे स्क्रीन पर फ्लैश करते हैं। समस्या यह प्रतीत होती है कि संकलन को एनजी-क्लोक निर्देश और कक्षा को हटा दिया जाता है, यह नियंत्रक सामग्री को दृश्यमान बनाता है, भले ही यह नहीं होना चाहिए क्योंकि एनजी-शो गलत है।

अगर मैं एनजी-क्लोक की संकलन विधि में जेएस निष्पादन रोकता हूं तो मैं तत्वों को एनजी-क्लोक निर्देश के रूप में प्रकट कर सकता हूं। अगर मैं नियंत्रक में जेएस निष्पादन रोकता हूं (उदाहरण के लिए "$ scope.visible = false;") पर मैं देख सकता हूं कि नियंत्रक पृष्ठ पर दिखाई देता है। नियंत्रक फिर अदृश्य है क्योंकि इसे लोड करने में कुछ समय बाद होना चाहिए।

• मैं दस्तावेज़ के शीर्ष में मेरी app.js और Angular.js लोड हो रहा हूँ
• मैं दस्तावेज़ के शीर्ष
• मैं के साथ "! महत्वपूर्ण" में एनजी-लबादा सीएसएस नियम को शामिल किया है में अपने सीएसएस है मेरा बाहरी सीएसएस और इनलाइन

मैं इस चमकती को कैसे रोक सकता हूं? एनजी-क्लोक एनजी-शो का सम्मान क्यों नहीं करता है?

index.html:

<div ng-cloak class="ng-cloak" ng-controller="RoomsController" ng-show="visible"> 
    <h1>This flashes, it can be seen if we set a breakpoint in the controller js, or after the ng-cloak directive's compile method in angular.js</h1> 
</div> 

app.js:

app.controller('RoomsController', ['$scope', 
    function ($scope) { 
     $scope.visible = false; 
    } 
]); 

Answer 1

मैंने आपकी समस्या का पुन: उत्पन्न किया है और मेरे लिए काम की गई चीज़ आंतरिक div बनाने और के बजाय ng-if निर्देश का उपयोग करना था। मुझे उम्मीद है यह मदद करेगा।

<div data-ng-controller="RoomsController"> 
    <div ng-cloak class="ng-cloak" data-ng-if="visible" > 
     Some text 
    </div>   
</div> 

Answer 2

ngCloak निर्देश अंत compile प्रक्रिया जब तक संबंधित तत्वों छुपाता है। यह {{ someBinding }} सामान छिपाने के लिए उपयोगी है, और शायद कुछ और नहीं। linking प्रक्रिया में वास्तविक लिंकिंग और बाइंडिंग।

एक तत्व की चमकती रोकने के लिए, यह वहाँ आवेदन बूटस्ट्रैप ही जब तक नहीं होना चाहिए। आप साधारण विजेट्स के लिए ngInclude पर और ngView को बड़ी, जटिल चीजों के लिए देख सकते हैं।

Answer 3

कक्षा में एक एनजी-हाइड का उपयोग करें, जे एस इसे उतार या इसे फिर से सेट हो जाएगा यहां तक ​​कि अपने वहाँ अगर लेकिन जे एस किक में यह वहाँ बैठते हैं और अपने div को छिपाने के लिए सीएसएस का उपयोग कर सकते जब तक

<div data-ng-controller="RoomsController"> 
    <div ng-cloak class="ng-cloak ng-hide" data-ng-if="visible" > 
     Some text 
    </div>   
</div> 

Answer 4

आईई मोबाइल में ngCloak के साथ मुझे एक ही समस्या थी। आसान समाधान मैं के साथ आया था अन्य उत्तर में से कुछ के लिए समान है, लेकिन मैं बजाय एनजी शो उपयोग करें, और किसी भी अतिरिक्त $scope चर के बिना:

<div class="ng-hide" ng-show="true"> 
    {{mydata}} 
</div> 

समाधान है कि आप ng-hide वर्ग जोड़ सकते हैं और आवश्यकता है ng-show="true"। यह सुनिश्चित करता है कि तत्व केवल ng-show निर्देश के बाद दिखाई देगा।

<div class="ng-hide" ng-controller="RoomsController" ng-show="visible"> 
    <h1>This flashes, it can be seen if we set a breakpoint in the controller js, or after the ng-cloak directive's compile method in angular.js</h1> 
</div> 

यह शुरू में तत्व को छुपाता है:

Answer 5

एक बहुत चारों ओर खिलवाड़ करने के बाद मैं थोड़ी देर के लिए पूरी तरह से ng-cloak हटाने, तत्व को ng-hide वर्ग जोड़कर इस "ठीक" करने में कामयाब रहे। ng-show निर्देश संसाधित करते समय कोणीय ng-hide वर्ग को हटा देता है।