View nicht aktualisiert, wenn es sollte

Disclaimer, ich bin ein eckiger noob.View nicht aktualisiert, wenn es sollte

Also, was ich in den letzten paar Stunden versucht habe, ist die Authentifizierung in meinem Dienst mit einem Klick auf eine Schaltfläche, die die Benutzerinformationen oder ein Anmeldebild anzeigen soll abhängig davon, ob die Authentifizierung wahr ist. Es zeigt die korrekten Informationen an, wenn die Seite geladen wird, aktualisiert die Ansicht jedoch nicht, wenn ich auf die Schaltfläche klicke. Nur zum Spaß habe ich ein Eingabefeld hinzugefügt, das an den Benutzernamen der Benutzerinformation gebunden ist, um zu sehen, ob die Bindung funktioniert. Ich bin in der Lage, den Benutzernamen wie erwartet zu aktualisieren, aber ich bemerkte ein seltsames Ergebnis. Wenn ich den Authentifizierungsknopf umschalte, ändert sich nichts, aber die Ansicht wird aktualisiert, wenn ich versuche, den Benutzernamen über das Eingabefeld zu aktualisieren. Die Änderung wird an der Authentifizierung vorgenommen, aber aus irgendeinem Grund einfach nicht wiedergegeben.

Jede Hilfe zu diesem würde sehr geschätzt werden.

var app = angular.module("appMain", []); 
 

 
app.service("userInformation", [function() { 
 
    this.authentacation = true; 
 
    this.username = "user"; 
 
    this.balance = "10.00"; 
 
    this.avatar = "http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/81/81322ac9812dad58e9525a010c76bcf4e585d820.jpg"; 
 

 
    this.toggleAuthentacation = function() { 
 
     this.authentacation = !this.authentacation; 
 
     console.log(this.authentacation); 
 
    }; 
 

 
}]); 
 

 
app.controller("headerController", ["$scope", "userInformation", function($scope, userInformation) { 
 
    $scope.userInformation = userInformation; 
 
    console.log($scope.userInformation); 
 

 

 
    document.getElementById("btn1").addEventListener("click", function() { 
 
     userInformation.authentacation = ! userInformation.authentacation; 
 
     $scope.userInformation = userInformation; 
 
     console.log($scope.userInformation); 
 
    }); 
 

 
}]);

<!DOCTYPE html> 
 
<html> 
 
<link rel="stylesheet" href="css/style.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<body ng-app="appMain"> 
 

 
    <header ng-controller="headerController"> 
 
     <img id="logo" src="/img/logo.png"> 
 
     <div id="userInfo" ng-show="userInformation.authentacation"> 
 
      <ul> 
 
       <li>Hello {{userInformation.username}}!</li> 
 
       <li>Balance: ${{userInformation.balance}}</li> 
 
       <li><img id="avatar" src="{{userInformation.avatar}}" /></li> 
 
      </ul> 
 
     </div> 
 
     <div id="userInfo" ng-hide="userInformation.authentacation"> 
 
      <ul> 
 
       <li><img src="https://steamcommunity-a.akamaihd.net/public/images/signinthroughsteam/sits_01.png"></li> 
 
      </ul> 
 
     </div> 
 

 
     <button id="btn1">Button1</button> 
 
     <input type="text" ng-model="userInformation.username"> 
 
    </header> 
 

 
</body> 
 

 
</html>

Quelle

2017-03-05 AllAnimals

Ihre Schaltfläche tut nichts jetzt. Es ist nur ein einfacher Knopf. Sie möchten es mit 'ng-click' in Ihre' toggleAuthentacation'-Funktion verbinden. – Ladmerc

Die Schaltfläche aktualisiert tatsächlich den Wert und erhält eine Rolle im headerController. Ich habe überprüft, dass es mit console.log funktioniert – AllAnimals

@Ladmerc Nach weiterer Untersuchung war dies das Problem! Ich habe dem Controller eine Funktion hinzugefügt, die ich mit ng-click aufgerufen habe, die die Ansicht sofort aktualisiert hat. Du bist ein Lebensretter! – AllAnimals

Event Handler müssen mit dem AngularJS Rahmen und seinem verdauen Zyklus integriert werden.
Die ng-click directive macht das automatisch.

Angular ändert den normalen JavaScript-Fluss, indem es eine eigene Ereignisverarbeitungsschleife bereitstellt. Dies teilt das JavaScript in den klassischen und den angularen Ausführungskontext auf. Nur Operationen, die in Schrägausführungskontext angewendet werden, werden von Angular Datenbindung profitieren, Ausnahmebehandlung, das Eigentum zu beobachten, etc

--AngularJS Developer Guide v1.1 - Concepts - Runtime

Quelle

2017-03-05 16:39:44

Versuchte beide Änderungen und sie liefern das gleiche Ergebnis wie zuvor. – AllAnimals

Okay, danke für den Versuch, dies ist etwas, das große Anwendungen betrifft, wenn Scoping zu einem Problem wird (JavaScript Scopes, nicht Angular Scopes) ... Ich werde diese Antwort als Community-Wiki-Element markieren, wie es nicht ist besonders nützlich für Sie Problem. –

EDIT: ich das Problem gelöst indem Sie die Funktion nicht über document.getElementById an die Schaltfläche binden, sondern stattdessen eine Funktion innerhalb des Controllers erstellen, die ich mit ng-click in html binde.

app.controller("headerController", ["$scope", "userInformation", function($scope, userInformation) { 
    $scope.userInformation = userInformation; 
    console.log($scope.userInformation); 


    $scope.toggleAuthentacation = function() { 
     userInformation.authentacation = ! userInformation.authentacation; 
     $scope.userInformation = userInformation; 
     console.log($scope.userInformation); 
    }; 

}]);

<button id="btn1" ng-click="toggleAuthentacation()">Button1</button>

Quelle

2017-03-05 17:01:11 AllAnimals

Angular ändert den normalen JavaScript-Fluss, indem eine eigene Ereignisverarbeitungsschleife bereitgestellt wird. Dies teilt das JavaScript in den klassischen und den angularen Ausführungskontext auf. Nur Operationen, die im Angular-Ausführungskontext angewendet werden, profitieren von der Angular-Datenbindung, der Ausnahmebehandlung, der Überwachung von Eigenschaften usw. – georgeawg

View nicht aktualisiert, wenn es sollte

Antwort

Verwandte Themen