Wie verwenden von AngularJS zu faul laden von Inhalten in einem "Reduzierbare Palette"

Ich Baue eine Anwendung, die verwendet die Bootstrap-Zusammenbruch Komponente zum Rendern einer Sequenz von panels, die zunächst im eingeklappten Zustand.

Da auf der Seite viele solcher Platten, und jede von Ihnen können enthalten eine große Menge des Inhalts, es scheint angemessen zu sein, füllen Sie diese Platten auf Nachfrage, von der Ausführung einer AJAX-Aufruf, wenn der Benutzer erweitert ein beliebiges Bedienfeld.

Den dynamischen Inhalt der Seite (einschließlich der markup-Code für die panels) ist gerendert mit AngularJS, und ich vermute, es ist möglich zu konfigurieren Winkel zum binden an ein Ereignis auf dem panel-Elemente, dass die Ergebnisse in die Inhalte lazy geladen wird, wenn Sie sich erweitern.

Leider, nach einem Blick auf die AngularJS-Dokumente und die verfügbaren tutorials, die ich nicht sehen kann, wie am besten in Angriff zu nehmen. Kann jemand werfen Licht auf?

Vielen Dank im Voraus,

Tim

  • Verwenden Sie einfach <div ng-include="panelTemplate"></div> innerhalb Ihrer Gremien und definieren/festlegen panelTemplate var in dem moment Sie öffnen Sie die Systemsteuerung. Dies führt das XHR-Anfrage und Holen sich die panel-Ansicht nur in dem moment, das panel ist das erste mal geöffnet.
  • Dank Stewie. Das sieht wie ein vielversprechender Ansatz, aber ich bin nicht klar, wie trigger definieren/festlegen von panelTemplate, wenn das panel geöffnet ist. Wenn Sie buchen möchten, eine Antwort mit einem code-Beispiel, ich werde es versuchen und (vermutlich) akzeptieren. Danke.
InformationsquelleAutor Tim Coulter | 2013-09-26
  1. 2

    @Tim Coulter, habe ich etwas geschaffen, das nach der Idee von @Stewie.

    Kann es auf jeden Fall verbessert werden, aber ich denke, es ist ein guter Ausgangspunkt.

    Habe ich eine kleine Richtlinie zum binden des click-Ereignisses des Akkordeon-panel. Wenn das click-Ereignis ausgelöst, ich habe das panel-template über die panel-template= - Attribut und aktualisiert das main-template die verwendet wird, in das panel.

    Verweist er auf 2 html-Dateien (panel1.html und panel2.html), die den Inhalt enthält, der jedes panel.
    Ich würde empfehlen, einen Dienst zu erstellen, zu Holen, diese Dateien über AJAX - genau so, wie Sie wollte.
    Auf den code unten, ich habe einen Dienst namens dataService für diesen Zweck, und Sie sollten binden Sie es an die click Ereignis - so-Dateien werden auf Abruf geladen, wenn der Benutzer darauf klickt.

    Beachten Sie die mainTemplate ist ein gemeinsames Gremium für alle Akkordeons, so dass, wenn es änderungen, die alle Akkordeons werden die gleichen Inhalte, ABER ich gehe davon aus, das Sie anzeigen möchten nur ein panel zur Zeit, richtig ?!

    Jedenfalls, wie ich sagte, bevor die Logik verbessert werden kann, diese zu beheben, wenig 'Hinweise', aber ich glaube, die core-Funktionen gibt es, um mit zu beginnen. 🙂

    <!doctype html>
<html ng-app="myApp">
  <head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>  
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">

    <script>

    var myApp = angular.module('myApp', []);


    myApp.controller('AccordionDemoCtrl', ['$scope', 'dataService', function ($scope, dataService) {
        $scope.oneAtATime = true;

        $scope.mainTemplate = '';

        $scope.groups = [
          {
            id: "001",
            title: "Dynamic Group Header - 1",
            content: "Dynamic Group Body - 1",
            template: "panel1.html"
          },
          {
            id: "002",
            title: "Dynamic Group Header - 2",
            content: "Dynamic Group Body - 2",
            template: "panel2.html"

          }
        ];

    }]);

    myApp.factory('dataService', [ '$http', function($http){
      return {
          getData: function() {
            return //you AJAX content data here;
          }
      }
    }]);

    myApp.directive('accordionToggle', [function () {
      return {
        restrict: 'C',
         scope: {
         mainTemplate: '=',
         panelTemplate: '@'
       },
       link: function (scope, element, iAttrs) {

         element.bind('click', function(e){

           scope.mainTemplate = scope.panelTemplate;

           scope.$apply();

         });
       }
     };
   }]);


    </script>

  </head>
  <body ng-controller="AccordionDemoCtrl">

  <div class="accordion" id="accordionParent">
    <div class="accordion-group" ng-repeat="group in groups" >
     <div class="accordion-heading">
        <a class="accordion-toggle" main-template="$parent.mainTemplate" panel-template="{{ group.template }}" data-toggle="collapse" data-parent="#accordionParent" href="#collapse{{ $parent.group.id }}">
         Collapsible Group Item {{ $parent.group.id }}
       </a>
     </div>
     <div id="collapse{{ group.id }}" class="accordion-body collapse">
       <div class="accordion-inner">
         <div class="include-example" ng-include="mainTemplate"></div>
       </div>
     </div>
   </div>
 </div>

   </body>
  </html>
    • Das ist eine gute Lösung. Vielen Dank für die Zeit nehmen, die es für mich erstellen.
    • Dies ist eine gute Lösung und funktioniert auch für die Stiftung Akkordeon. Vielen Dank für das teilen dieses. Für diejenigen, die interessiert sind, in die Lösung für die Winkel-Stiftung bin ich teilen diese plunker: plnkr.co/Bearbeiten/KkZlqs3UDdYE0805DTm9?p=Album Vorhören
    InformationsquelleAutor Denison Luz
  2. 2

    Dies ist so alt, aber die Frage könnte noch kommen, bis jetzt und dann. Jetzt finde ich das die beste Lösung ohne umweltschädliche Ihren Controller:
    (myDirective laden Ihre Inhalte über AJAX direkt nach seiner Erstellung.)

    <accordion>
  <accordion-group 
    heading=""
    ng-repeat="foo in bar"
    ng-init="status = {load: false}"
    ng-click="status.load = true">

  <myDirective ng-if="status.load"></myDirective>
  </accordion-group>
</accordion>

    jedes element erstellt durch ng-repeat bekommt seine eigene $scope, also Klick ab-Akkordeon-Gruppe wird im Ergebnis nur der jeweiligen Richtlinie geladen wird.

    Bearbeiten:
    je nach Latenz und die Größe der Daten, die zu faul sind geladen, sollten Sie überlegen, mit ng-mouseover statt ng-click. So laden beginnt einige 100ms, bevor der Benutzer öffnet das Akkordeon, das kann reduzieren die 'Trägheit' der Benutzeroberfläche. Natürlich gibt es die Kehrseite der gelegentlich laden Sie den Inhalt von Gruppen, die sind eigentlich nie geklickt.

    InformationsquelleAutor j2L4e
Schreibe einen Kommentar