ngHide/ngShow एकल पृष्ठ अनुप्रयोग में $ rootScope का उपयोग करके

Question

एंगुलरजेएस के लिए फिर से सहायता के लिए आप सभी तक पहुंच रहा है। मैं एक एसपीए बना रहा हूं जहां मेरा लेआउट (मास्टर) पेज तीन खंड में विभाजित है नेविगेशन बार, केंद्र सामग्री, सही आइटम सूची बार। जब मैं अपना होम पेज लोड करता हूं तो मेरी सही वस्तु सूची छिपी जानी चाहिए, लेकिन शेष स्क्रीन में दिखाई देनी चाहिए। मैंने homeController में $ rootScope चर बनाया है और मान को पथ पथ के आधार पर 'सत्य' पर सेट किया है और मान को ngHide पर सेट करने के लिए टेम्पलेट में उस चर का उपयोग कर रहा है। जब मैं एक अलग पृष्ठ पर नेविगेट करता हूं क्योंकि मैं एसपीए का उपयोग कर रहा हूं, तो मेरे दाएं और बाएं बार फिर से लोड नहीं होंगे, केवल मेरी केंद्र सामग्री ही एक नया दृश्य है। नए दृश्य के टेम्पलेट में डेटा भेज रहे नियंत्रक में नया दृश्य लोड करते समय मैं $ rootScope चर को रीसेट कर रहा हूं जिसे मैंने घर में बनाया है नियंत्रक 'झूठी' पर, लेकिन मेरा दायां बार अभी भी दिखाई नहीं दे रहा है। मैं देख सकता था कि एनजी-छुपे हुए वर्ग अभी भी चालू है हालांकि इंटरपोलेशन ने 'सत्य' मान को अद्यतन किया है। किसी भी सुझाव की अत्यधिक सराहना की जाएगी। लेआउट पेज से

मार्कअप:

<aside class="right_bar" ng-hide="{{$root.show}}"> 
     <div class="my-list"><span class="f3">My Cart</span><div class=""><span class="list-count">0</span></div></div><div class="list-item"><ul></ul></div> 
    </aside> 

HomeController कोड:

function getHomeConfigsCtrl($http, $location, $rootScope) { 

    $rootScope.show = false; 

    var loc = $location.path(); 

    if (loc === '/Home/Index' || loc ==='') 
    { 
     $rootScope.show = true; 
    } 
    } 

श्रेणियाँ नियंत्रक कोड: यहीं पर मैं अपने $ rootScope वेरिएबल का मान को रीसेट कर रहा हूँ

function getAllCategoryDetails($routeParams,$rootScope) { 
    $rootScope.show = false; 
} 

Answer 1

दो आपके प्रस्तुत कोड को काम करने के लिए आपको कोणीय के बारे में जानने की आवश्यकता है:

• आप निर्देशों एनजी में {{}} का उपयोग कर मूल्यों को जोड़, बजाय ng-hide="showCart" उपयोग करने की आवश्यकता नहीं है।

• मान लिया जाये कि सभी अपने नियंत्रकों, सभी कार्यक्षेत्रों में एक ही आवेदन के भीतर एक ही रूट, अर्थात जो कुछ भी आप $ rootScope पर परिभाषित सभी बच्चे स्कोप लिए उपलब्ध हो जाएगा से विरासत एक ही कोणीय आवेदन के भीतर हैं। आवेदन में किसी भी दृश्य के भीतर से $ rootScope.x तक पहुंचने के लिए आपको केवल यह करना है: {{x}} या अपने मामले में आप इसे निर्देश के अंदर उपयोग कर रहे हैं, आप ऐसा कुछ कर सकते हैं:

  <aside class="right_bar" ng-hide="showCart">

  यह आपके वर्तमान क्षेत्र के लिए दिखेगा अगर यह एक showCart तो यह उसका उपयोग करेंगे है, अन्यथा यह $ rootScope.showCart