Erstellen einer eckigen Ansicht basierend auf Ajax Antwort

Ich versuche, mit Angular (1) zu beginnen, habe ich ein Layout, wo das Nav je nach dem Typ des Benutzers geändert werden muss, wenn die Seite lädt ich sende eine Anfrage an die API für das Benutzerobjekt (diese werde ich mit den anderen Controllern auf der Seite teilen).Erstellen einer eckigen Ansicht basierend auf Ajax Antwort

Dies ist mein Controller so weit,

app.controller('DashboardController', function($scope, UserService, $rootScope){ 
     $scope.loading = true; 

     if($scope.loading) { 
      $scope.doInitialisation 
     } 

     $scope.isSuper = function() { 
      if($scope.user.isSuper == 1) { 
       return true; 
      } 

      return false; 
     } 

     UserService.authenticatedUser() 
      .then(function(response){ 
       $scope.loading = false; 
       $rootScope.user = response.message; 
      }, function(error) { 
       $scope.hasError = true; 
       $scope.errors = error.message; 
      }); 
    });

In meiner Vorlage versuchen, etwas möchte ich tun und eine UL zeigte basierend auf dem Benutzertyp

<ul ng-if="isSuper()" ng-include="dashboard/nav/super.html"id="sidebar-menu" class="sf-js-enabled sf-arrows"> 

</ul><!-- #sidebar-menu -->

ich folgende Fehlermeldung erhalten,

Kann nicht lesen Eigenschaft 'isSuper' undefinierter

Ich nehme an, es ist, weil isSuper() gefeuert wird, bevor mein Ajax geladen hat, gibt es einen Weg um uns herum? Kann ich tun, was ich in der Vorlage im Ajax-Erfolgsrückruf mache?

Gibt es insgesamt einen besseren Weg?

Quelle

2017-01-12 Udders

Sie Routing verwenden, wenn dies der Fall können Sie die resolve-Eigenschaft auf der Route benutzen, die die Abhängigkeiten sicher laden machen, bevor der Controller-Code wird ausgeführt, siehe http: //odetocode.com/blogs/scott/archive/2014/05/20/using-resolve-in-angularjs-routes.aspx –

Initialisieren Sie den $ scope.user als ein neues leeres JavaScript-Objekt, der alternative Ansatz belässt es an AngularJS , wird die Ansicht aktualisiert, wenn sich der Ausdruck der ng-if-Anweisung ändert (true oder false), überprüfe mein Beispielcode-Snippet. –

Das folgende Code-Snippet zeigt, wenn Daten asynchron ankommen. Angular aktualisiert die Ansicht durch seine Datenbindung, um die HTML-Elemente mit der ng-if-Direktive anzuzeigen. Plunker z.B. mit der ng-include Richtlinie

angular 
 
    .module('demo', []) 
 
    .controller('DefaultController', DefaultController); 
 

 
DefaultController.$inject = ['$timeout']; 
 

 

 
function DefaultController($timeout) { 
 
    var vm = this; 
 
    vm.user = {}; 
 

 
    $timeout(function() { 
 
    vm.user.role = 'admin'; 
 
    }, 1000); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="demo"> 
 
    <div ng-controller="DefaultController as vm"> 
 
    <div ng-if="vm.user.role === 'admin'"> 
 
     <span>Hello, Admin</span> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2017-01-12 18:00:29

Erstellen einer eckigen Ansicht basierend auf Ajax Antwort

Antwort

Verwandte Themen