Ich verwende Angular 1.x für meinen Stack. Wenn ich einen API-Aufruf durchführe und die Antwort in $rootScope speichere, kann in der Ansicht anderer Controller nicht darauf zugegriffen werden.

Mein Controller:

angularApp.controller('mainController', ['$scope', '$rootScope', '$http', function($scope, $rootScope, $http){

  var checkIfAuthenticated = function(){
    return $http.get('/api/isAuthenticated');
  };

  checkIfAuthenticated()
  .then(function(res) {
    if(res.status===200){
        console.log("Success");
        $rootScope.userLoggedIn = true;
    } 
  })
}]);

In der Ansicht eines anderen Controllers verwende ich es nun so:

<div ng-if="userLoggedIn" class="py-1 pl-1 pr-1">
  <span><b>Message Board</b></span>
  <div class="form-control" readonly id="lockTextbox">Show something</div>
</div>

Das Problem ist, dass der API-Aufruf /api/isAuthenticated die richtige Antwort liefert (Status 200), aber ng-view es falsch macht.

Ich bin sicher, dass dies damit zu tun hat, dass $rootScope.userLoggedIn eine Antwort von einem asynchronen Aufruf ist (wenn ich Success in meiner Konsole erhalte), aber wie löse ich das?

Danke im Voraus!

BEARBEITEN

Nachdem ich die Frage gestellt hatte, bemerkte ich, dass in der Ansicht des Hauptcontrollers die ng-if-Logik auch nicht funktioniert. Was sehr seltsam ist, ist, dass wenn ich die Debug-Konsole des Browsers öffne, sie funktioniert! Ich denke, dies ist nur ein asynchrones Problem, aber ich weiß nicht, wie ich es lösen soll. Wie kann ich der Ansicht mitteilen, dass die Variable unterwegs ist?

-1
Shayan Khan 19 Feb. 2020 im 15:53

3 Antworten

Beste Antwort

Ich habe das Problem gefunden. Ich habe mein Angular von 1.6.4 auf 1.7.9 aktualisiert (und alle Module wie Angular-Sanitize usw.) und das hat den Trick gemacht. Hätte das erste sein sollen, was ich getan habe, aber ich habe es völlig verpasst

0
Shayan Khan 22 Feb. 2020 im 07:31

Arbeitsbeispiel

Die folgende Demo zeigt die Variable $ rootScope, die in beiden Controllern verfügbar ist, nachdem sie aufgrund eines um zwei Sekunden verzögerten Versprechens festgelegt wurde.

angular.module("app",[])
.controller('mainController', function($scope, $rootScope, $timeout) {
  var checkIfAuthenticated = function(){
    return $timeout(function() {
        return { status: 200 };
    }, 2000);
  };
  checkIfAuthenticated()
  .then(function(res) {
    if(res.status===200){
        console.log("Success");
        $rootScope.userLoggedIn = true;
    } 
  })
})
.controller('otherController', function($scope) {
  console.log("other controller");
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
  <fieldset ng-controller="mainController">
     MAIN Controller userLoggedIn={{userLoggedIn}}<br>
     <div ng-if="userLoggedIn">
        Message Board - Show something
     </div>
  </fieldset>
  <fieldset ng-controller="otherController">
     OTHER Controller userLoggedIn={{userLoggedIn}}
     <div ng-if="userLoggedIn">
        Message Board - Show something
     </div>
  </fieldset>
</body>
1
georgeawg 19 Feb. 2020 im 23:09

OK, um das Timing-Problem zu lösen, werde ich die Antwort komplett überarbeiten. Dies sollte ein - schnelles und schmutziges, aber - funktionierendes Beispiel sein:

Index.html

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="plunker" ng-cloak>
    <div ng-controller="MainCtrl as $ctrl">
      <h1>Hello {{$ctrl.name}}</h1>
      <p>Start editing and see your changes reflected here!</p>
      <div ng-if="$ctrl.name === 'Angular.js'"><b>Message Board</b</div>
    </div>
  </body>
</html>

Script.js

import angular from 'angular';

angular.module('plunker', []).controller('MainCtrl', function($scope, $http) {
  const self = this;
  self.name = 'Plunker';
  console.log('hello');

  function checkIfAuthenticated(){
    console.log('get');
   return $http.get('https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js');
  };

  checkIfAuthenticated().then(function(res) {
    if(res.status===200){
        console.log('Success');
        self.name = 'Angular.js'; // insert any logic here
    } else {
      console.log('Failed');
    }
  })
});

Konsole

hello 
get 
Success 

Funktioniert es für dich?

1
Konstantin A. Magg 19 Feb. 2020 im 18:51