Probleme mit AngularJS-Controller

Ich habe folgendes Setup in meinem HTML-Datei ::Probleme mit AngularJS-Controller

<body> 
    <nav ng-controller="loginCtrl"> 
     <div> 
      <li>Apple</li> 
      <li>Mango</li> 
      <li>{{user}}</li> 
     </div> 
    </nav> 

    <div ui-view></div> 

</body>

ich ein Navigationsmenü haben und die ui-view, die verschiedene Seiten anzeigt.

Ich habe auch einen Controller, loginCtrl, mit einer Bereichsvariablen namens $scope.user. Dieser Controller wird auch im UI-State-Router für die Datei login.html aufgerufen, so dass das Login-Formular seine Methoden verwenden kann.

Wenn sich ein Benutzer anmeldet, möchte ich seinen Namen im Navigationsmenü unter Verwendung der obigen {{user}} anzeigen. Das Navigationsmenü, wie Sie sehen können, ist sichtbar (statisch) unabhängig von anderen Teilseiten, die in ui-view geladen werden.

Im Moment funktioniert es nicht und ich weiß nicht warum.

Mein Verständnis ist, dass das Login-Formular in der login.html und das Navigationsmenü in verschiedenen Dateien sind, so dass sie möglicherweise den gleichen Controller (unter dem gleichen Modul) verwenden und möglicherweise in verschiedenen Bereichen/Umgebungen (bin mir da nicht wirklich sicher).

Deshalb aktualisiere ich den Wert $scope.user, aber es erscheint nicht im Navigationsmenü.

Kann mir jemand erklären, warum es nicht funktioniert und wie ich meine Funktionalität erreichen kann?

Dank

Quelle

2016-06-16 Eddy Freeman

Sie bitte Ihre Controller-Logik enthalten mit deinem Code. – dYale

Sie sind zwei verschiedene Instanzen desselben Controllers. Jeder hat seinen eigenen Umfang. –

einen Singleton-Dienst gleiches UserData Objekt zu teilen: Jetzt

app.service('UserData', function(){return {name: 'default'};}); 
app.controller('LoginController', function($scope, UserData){ 
    $scope.user = UserData; 
});

alle Controller-Instanzen Zugriff auf gleiches UserData Objekt haben.
Wenn user.name geändert wurde, können alle Controller es sehen.

Quelle

2016-06-16 14:16:53

Ich frage mich, ob es notwendig ist, Ihre LoginController für Ihre ui-Ansicht und ein Geschwisterelement auf cal, wenn Sie es auf einem übergeordneten Element Wie dem auch sei

laden könnte man mehrere Lösungen haben die Zwei-Wege zu machen Bindung Arbeit:

@vp_arth Lösung ist wirklich toll, verwendet in der Regel diese Daten zu teilen zwischen Controllern
, und wenn eine andere Controller für Ihre Login benötigt, erklären. html, das ist ein Kind von Ihrem LoginController. Verwenden Sie dann ein Objekt anstelle einer Variable in der übergeordneten Bereich:

$scope.user = {};

und dann füllen Sie es in Ihrem Kind Umfang wie folgt aus: $scope.user.name = ...

Auch wenn Sie die gleiche Controller verwenden Als übergeordneter AND-Kind-Bereich sollten Sie dies mit etwas wie diesem tun: $ scope.user = $scope.user ? $scope.user : {}; statt $scope.user = {};

(wenn es nicht klar ist, kann ich eine vergleichende Geige machen Sie zu zeigen)

Dieses Wiki mir wirklich geholfen, wenn ich Fragen wie das Ihre hatte: https://github.com/angular/angular.js/wiki/Understanding-Scopes

Quelle

2016-06-16 15:27:47

Ein Detail: seine "nav" und "ui-view" Controller sind nicht Eltern-Kind. :) –

Oups was für ein kleines Detail ... Vielen Dank für das Zeigen, ich werde die Antwort bearbeiten! –

Probleme mit AngularJS-Controller

Antwort

Verwandte Themen