Angular ngClick kann nicht auf Variablen in einem anderen Bereich zugreifen

Question

Ich bin völlig neu in Javascript und insbesondere AngularJs.Hier ist mein Problem: Ich muss die ng-click-Funktion innerhalb von ng-repeat aufrufen, um etwas HTML außerhalb davon zu verbergen.

Soweit ich weiß, liegt das Problem darin, dass sich alle Variablen (in diesem Fall insbesondere die Variablen „Standorte“) in einem anderen Bereich befinden, auf den ich nicht zugreifen kann.Kann mir jemand helfen, dieses Problem auf dem kürzesten Weg zu umgehen?

Bisher habe ich es fast geschafft, meine Website nur mit eckigen HTML-Tags fertigzustellen (was bedeutet, dass ich eigentlich keine benutzerdefinierten Funktionen schreiben musste), und dies ist das absolut letzte Stück.

Soweit ich weiß, hat außerdem jedes Mal, wenn ein neuer Controller in Angular erstellt wird, seinen eigenen Geltungsbereich.In diesem Fall wurden alle Aufrufe (außer dem, mit dem ich Probleme habe) durchgeführt, ohne dass einer der Controller initialisiert wurde. Wie greifen Sie also auf Variablen zu?Gibt es so etwas wie einen „Standardbereich“?Ich weiß, dass rootScope bei mir nicht funktioniert hat.

Vielen Dank im Voraus.

<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

Sie müssen einen Controller erstellen, der beide HTML-Fragmente umgibt:

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

Der Controller definiert die Standorteigenschaft, aber innen ein anderes Objekt (nennen wir es viewState):

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

Dann binde dich an das Innere 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">

---

Der Grund dafür und warum es bei Ihnen nicht funktioniert hat $rootScope Auf diese Weise erben Bereiche die Eigenschaften ihrer übergeordneten Elemente durch die prototypische Vererbung von Javascript.Grob und ganz kurz:

Wenn du lesen eine Eigenschaft aus einem Bereich und dieser Bereich diese Eigenschaft nicht enthält, wird JS sich seinen Prototyp ansehen (erneut). sehr grob sprich: der übergeordnete Bereich des Bereichs).Die Kette geht weiter bis zum $rootScope.Also, setzen locations im $rootScope wird zum erfolgreichen Lesen dieser Eigenschaft führen.

Wann immer du schreiben Wenn Sie eine Variable in einen Bereich einfügen, wird sie direkt in diesen Bereich geschrieben, unabhängig davon, woher sie gelesen wurde.So verändernd locations im inneren Bereich hat im äußeren Bereich keine Auswirkung (z.B. $rootScope).

Wenn Sie die Variable in ein Objekt einfügen, wird das Objekt gelesen, das in den richtigen Bereich aufgelöst wird, und dann wird die Eigenschaft in das richtige Objekt geschrieben.

Answer 2

Das ist das, was ich benutzt habe.Es scheint extrem einfach, aber vielleicht wird es anderen helfen, die auch Anfänger sind.Dies ist im Wesentlichen der Code, um Werte in verschiedenen Controllern erreichbar zu machen.Es ist das gleiche wie die Nikos vorgeschlagen, wenn ich es richtig verstanden habe.

generasacodicetagpre.

Answer 3

das ist das, was ich tue, um ein zugängliches Rootscope zu haben.

Robofen in app.run einrichten: (Vergiss nicht, $ rootscope injizieren)

generasacodicetagpre.

Erstellen Sie einen Controller mit einer Funktion, die RootScope ändert (auch $ rootscope injiziert)

generasacodicetagpre.

Das ist also das HTML:

generasacodicetagpre.

und das ist der js:

generasacodicetagpre.

Sie finden hier einen Arbeitsplumpen: http://plnkr.co/edit/yglioe55555q8wkicc5?p= Vorschau

Nicht sicher, ob das, was Sie wollten.Aber ich hoffe es hilft trotzdem. (Schreien Sie mich nicht an, dass dies gegen eckige Zen ist, aus Gründen: -)