it-swarm.com.de

Angularjs: Wie wird das Lade-Symbol angezeigt, wenn in $ routeProvider 'resol' verwendet wird?

Der folgende Code liest über einen Dienst und zeigt auf der Webseite eine Liste von 'Seiten'-Objekten für eine bestimmte' Seitenkategorie '(Zeichenfolge). Mit der Auflösungsobjekteigenschaft in $ routeProvider.when () kann ich die Aktualisierung der Ansicht verschieben, bis der neue Wert bereit ist. 

Zwei Fragen:

  1. Wenn Sie nach einer neuen Seitenliste fragen, möchte ich ein Lade-Symbol anzeigen. Wie kann ich das Ereignis erkennen, wenn der Lesevorgang vom Server beginnt (und das Ladesymbol angezeigt werden sollte)? Ich denke, ich könnte so etwas wie $ ('.pages-loading-icon'). Show () im Dienst machen, finde das aber zu gui abhängig zu stark im Dienst.

  2. Wenn der neue Wert fertig ist, möchte ich, dass der alte Wert ausgeblendet wird und der neue Wert eingeblendet wird. Was ist der "eckige" Weg, dies zu tun? Ich habe versucht, dies mit $ watch im Controller zu tun, aber der neue Wert wird kurz vor dem Ausblenden angezeigt.

Der Code:

app.js:

$routeProvider.when('/:cat', { templateUrl: 'partials/view.html', controller: RouteCtrl, resolve: RouteCtrl.resolve});

controller.js:

function RouteCtrl($scope, $routeParams, pages) {
        $scope.params = $routeParams;
        $scope.pages = pages;
    }

RouteCtrl.resolve={
    pages: function($routeParams, Pages){
        if($routeParams.hasOwnProperty('cat')){
            return Pages.query($routeParams.cat);
        }
    }
}

services.js: Die zuletzt gelesenen Seiten werden in currentPages und ihre Kategorie in lastCat gespeichert.

factory('Pages', function($resource, $q, $timeout){
    return {
        res: $resource('jsonService/cat=:cat', {}, {
            query: {method:'GET', params:{cat:'cat'}, isArray:true}
        }),
        lastCat: null,
        currentPages: null,
        query: function(cat) {
            var res = this.res;
            if(cat != this.lastCat){
                var deferred = $q.defer();
                var p = res.query({'cat':cat}, function(){
                    deferred.resolve(p);
                });
                this.lastCat = cat;
                this.currentPages = deferred.promise;
            }
            return this.currentPages;
        }
    };
})

view.html

<ul >
    <li ng-repeat="page in pages">
        <a href="#{{params.cat}}/{{page.slug}}">{{page.title}}</a>
    </li>
</ul>
37
Roar Skullestad

Nicht genau sicher, ob dies in Ihrem Code funktionieren würde, da Sie über die Ressourcenintegration $ verfügen. __ Es kann sich jedoch lohnen, in eckige Ereignisse zu schauen: $routeChangeStart und $routeChangeSuccess.

in html:

<span ng-show="isViewLoading"> loading the view... </span>

im Controller (der den Umfang der HTML-Datei oben definiert):

$scope.isViewLoading = false;
$scope.$on('$routeChangeStart', function() {
  $scope.isViewLoading = true;
});
$scope.$on('$routeChangeSuccess', function() {
  $scope.isViewLoading = false;
});
$scope.$on('$routeChangeError', function() {
  $scope.isViewLoading = false;
});
60
Tosh

Das Routing-System für eckig scheint ein bisschen begrenzt zu sein ..

Das hat es für mich gelöst:
http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

Auch über die Ereignisse, die zweimal ausgelöst werden: Wenn Sie eine Route einrichten, erfolgt die Zuordnung zu "a/b/c". Der Winkel wird automatisch mit einer anderen Route eingerichtet, "a/b/c /" (mit nachlaufendem Schrägstrich), um zur ersten (und umgekehrt) und beide lösen Ereignisse aus. Ich teste nur, ob Routenparameter vorhanden sind.

Zum begrenzten Zustand des Routing-Systems: Es gibt diesen Zug Winkel, um seine Fähigkeiten zu erweitern.

4
Tiago Roldão

Sie sollten $rootScope verwenden, da die Überwachung von $scope eines Controllers auf den Controller beschränkt ist und Sie bei einem Wechsel von einer Ansicht (einem Controller) zu einer anderen Ansicht (einem anderen Controller) wechseln. Es wäre also sinnvoll, One-Code-Fit-All zu haben.

$rootScope.$on('$stateChangeStart', 
function(event, toState, toParams, fromState, fromParams){ ... })

Stellen Sie in dieser Funktion den $rootScope.isLoadingState ein, der Ihr Ladekennzeichen anzeigt.

Dann benutze

$rootScope.$on('$stateChangeSuccess', 
function(event, toState, toParams, fromState, fromParams){ ... })

Um diese Variable aufzuheben.

Vollständige Referenz hier

1
code ninja

Sie können auch die Direktive ng-show verwenden. Prüfen Sie einfach, ob Ihr Modell leer ist, und zeigen Sie ein DOM-Subset wie folgt an:

    <!-- model not ready -->
    <div style="width: 200" ng-show="lines == ''">
      <div class="progress progress-striped active">
         <div class="bar" style="width: 0%;"></div>
      </div>
    </div>

    <!-- your model code -->
    <ul class="nav nav-tabs nav-stacked">
      <li ng-repeat="line in lines">
        {{line.Id}}
      </li>
    </ul>
1
user1126545

Ich mag den 'ng-show'... Aber der 'ui-if' des Angular UI-Projekts ist IMHO besser. Da der HTML-Code aus dem DOM entfernt wird ...

<span ui-if = "isViewLoading"> loading the view... </span>

_e

1
Edwin Beltran

Sie können eine Direktive erstellen, die basierend auf einer Rundsendung angezeigt wird, die Sie vor und nach einem Serviceabruf senden, die Sie für $ rootScope verwenden können. Wenn Sie also eine Factory aufrufen, um generische POST/GET-Aufrufe abzuwickeln, können Sie direkt vor dem Aufruf eine Funktion in $ rootScope aufrufen, z. B. "$ rootScope.startLoading ()" und nach deren Aufruf "$ rootScope" aufrufen. doneLoading () ", wobei jede dieser Methoden ein Ereignis überträgt, mit dem Sie Ihre Anweisung abrufen können. Dann handhabst du einfach mit deiner Direktive, um die Ereignisse zu fangen, "scope. $ On (" startLoading ", func (...) und lass es ein loading div template in das DOM einfügen/zeigen und ausführen, dann habe auch einen catch für Laden abgeschlossen, um es zu entfernen/auszublenden.

Auf diese Weise können Sie eine generelle Ladeüberlagerung von Nice erhalten.

0
Jeremy Reed