لا يمكن لـ Angular ngClick الوصول إلى المتغير في نطاق مختلف

Question

أنا جديد تمامًا على Javascript وخاصة AngularJs.هذه هي مشكلتي، أحتاج إلى استدعاء وظيفة ng-click داخل ng-repeat لإخفاء بعض html خارجها.

كما أفهم، تكمن المشكلة في أن جميع المتغيرات (في هذه الحالة على وجه التحديد "مواقع" متغيرة) موجودة في نطاق آخر لا يمكنني الوصول إليه.هل يمكن لأي شخص مساعدتي بأقصر طريقة ممكنة للتغلب على هذه المشكلة؟

لقد تمكنت حتى الآن من إنهاء موقع الويب الخاص بي تقريبًا باستخدام علامات html الزاويّة فقط (مما يعني أنني لم أضطر حقًا إلى كتابة أي وظائف مخصصة) وهذه هي القطعة الأخيرة على الإطلاق.

أيضًا، كما أفهم، كلما تم إنشاء وحدة تحكم جديدة في الزاوي، يكون لها نطاقها الخاص.في هذه الحالة، تم إجراء كافة الاستدعاءات (باستثناء تلك التي أواجه مشكلات فيها) دون تهيئة أي من وحدات التحكم، فكيف يمكنك الوصول إلى المتغيرات؟هل هناك شيء مثل "النطاق الافتراضي"؟أعلم أن rootScope لم يعمل معي.

شكرا لكم مقدما.

<div id="top_nav">
    <div id="top_nav_right">    
        <div id="page_header" ng-show="checked" ng-switch on="page">
        </div>  
        <a href="#" ng-click="checked = ! checked">
        </a>
    </div>      
</div>  
<div id="main_sidebar" class="check-element animate-hide" ng-show="checked">
    <ul class="menu" ng-show="!locations">
    </ul>
    <ul class="menu" ng-show="locations">
    </ul>
</div>

<div id="sub_sidebar" ng-show="checked" ng-switch on="page">
        <div ng-switch-default "check-element animate-hide">
                <div id="latest_trips_container">       
                    <div ng-controller="PostsCtrlAjax">  
                                <ul id="latest_trips" ng-controller="MyCtrl">   
                                    <li ng-repeat="post in travels">
                                                <div id="trip_details">
                                                    <a id="details" href="#/details" ng-click="locations =! locations"></a>
                                                </div>
                                    </li>
                                </ul>
                    </div>  
                </div>
        </div>              
</div>

Answer 1

سيتعين عليك إنشاء وحدة تحكم تحيط بجزئي HTML:

<div ng-controller="Ctrl">
    <!-- YOUR CODE HERE -->
</div>

ستقوم وحدة التحكم بتحديد خاصية المواقع، ولكن داخل كائن آخر (دعنا نسميه viewState):

app.controller("Ctrl", function($scope) {
    $scope.viewState = {
        locations: false
    };
};

ثم ربط إلى الداخل locations:

<ul class="menu" ng-show="!viewState.locations">
</ul>
<ul class="menu" ng-show="viewState.locations">
</ul>
...
<a id="details" href="#/details" ng-click="viewState.locations = !viewState.locations">

---

سبب ذلك ولماذا لم ينجح الأمر معك مع $rootScope هي الطريقة التي ترث بها النطاقات خصائص والديها من خلال الميراث النموذجي لجافا سكريبت.تقريبًا وقريبًا حقًا:

عندما انت يقرأ خاصية من نطاق وهذا النطاق لا يحتوي على هذه الخاصية، سوف ينظر JS إلى النموذج الأولي الخاص به (مرة أخرى تقريبًا جدًا التحدث، النطاق الأصلي للنطاق).وتستمر السلسلة حتى $rootScope.لذلك، وضع locations في ال $rootScope سيؤدي إلى قراءة ناجحة لهذه الخاصية.

كلما يكتب متغير إلى نطاق، يتم كتابته مباشرة إلى هذا النطاق، بغض النظر عن المكان الذي تمت قراءته منه.هكذا يتغير locations في النطاق الداخلي ليس له أي تأثير في النطاق الخارجي (على سبيل المثال. $rootScope).

يؤدي وضع المتغير داخل كائن إلى قراءة الكائن، والذي يتم تحليله إلى النطاق الصحيح، ثم كتابة الخاصية إلى الكائن الصحيح.

Answer 2

هذا هو ما انتهى به الأمر.يبدو بسيطا للغاية ولكن ربما سيساعد الآخرين الذين هم مبتدئين أيضا.هذا هو أساسا رمز لجعل القيم يمكن الوصول إليها في وحدات تحكم مختلفة.هو نفسه كما اقترح نيكوس إذا فهمت ذلك بشكل صحيح.

giveacodicetagpre.

Answer 3

هذا هو ما أفعله للحصول على Rootscope يمكن الوصول إليها.

قم بإعداد Rootscope in App.run: (لا تنسى حقن $ Rootscope)

giveacodicetagpre.

قم بإنشاء وحدة تحكم ذات دالة تقوم بتغييرات Rootscope ($ Rootscope حقن أيضا)

giveacodicetagpre.

لذلك هذا هو HTML:

giveacodicetagpre.

وهذا هو JS:

giveacodicetagpre.

سوف تجد رقصة عمل هنا: http://plnkr.co/edit/ygllioe55ai5q8wkicc5؟P= معاينة

غير متأكد إذا كان هذا ما تريد.ولكن آمل أن يساعد على أي حال. (لا تصرخ في وجهي أن هذا يعاني من الزين الزاوي، بسبب الأسباب: -)