Es gibt viele großartige Sets von Direktiven, die auf dem Markup und CSS von Twitter Bootstrap und AngularJS basieren. Einige Beispiele sind AngularStrap und AngularUI, aber keine von ihnen hat eine Direktive, die die Tabs von Bootstrap und das faule Laden von Daten unterstützt. Wenn also die Seite mit der Tab-Direktive zum ersten Mal geladen wird, werden alle Daten, auch die der nicht aktiven Tabs, geladen.
Hier sehen Sie, wie ich das faule Laden von Daten mit dem Markup von Twitter Bootstrap und AngularJS gelöst habe.
Tabset/Tab-Richtlinien
Der interessanteste Teil ist der Code, also hier ist er. Auf den ersten Blick sind dies ziemlich einfache Direktiven. Auch wenn Sie wahrscheinlich nicht sehen können, wo das faule Laden von Daten stattfindet, ist es doch da! Ich gehe davon aus, dass Sie wissen, wie man Direktiven erstellt, daher werde ich nur erklären, wie das faule Laden erfolgt. Wenn Sie mehr über AngularJS-Direktiven wissen möchten, können Sie die AngularJS-Dokumente besuchen.
Die Direktiven - JavaScript
[code language="javascript"] 'use strict'; angular.module('bootstrap.tabset', []) .directive('tabset', function () { zurück { einschränken: 'E', ersetzen: wahr, transclude: true, controller: function($scope) { $scope.templateUrl = ''; var tabs = $scope.tabs = []; var controller = this; this.selectTab = function (tab) { angular.forEach(tabs, function (tab) { tab.selected = false; }); tab.selected = true; }; this.setTabTemplate = function (templateUrl) { $scope.templateUrl = templateUrl; } this.addTab = function (tab) { if (tabs.length == 0) { controller.selectTab(tab); } tabs.push(tab); }; }, Vorlage: '<div class="row-fluid">' + '<div class="row-fluid">' + '<div class="nav nav-tabs" ng-transclude></div>' + '</div>' + '<div class="row-fluid">' + '<ng-include src="templateUrl">' + '</ng-include></div>' + '</div>' }; }) .directive('tab', function () { zurück { einschränken: 'E', ersetzen: wahr, erfordern: '^tabset', Bereich: { Titel: '@', templateUrl: '@' }, link: function(scope, element, attrs, tabsetController) { tabsetController.addTab(scope); scope.select = function () { tabsetController.selectTab(scope); } scope.$watch('selected', function () { if (scope.selected) { tabsetController.setTabTemplate(scope.templateUrl); } }); }, Vorlage: '<li ng-class="{active: ausgewählt}">' + '<a href="" ng-click="select()">{{ Titel }}</a>' + '</li>' }; }); [/code]
HTML
Dies ist ein HTML-Beispiel dafür, wie Sie die Direktiven verwenden können.
[code language="html"] <Registerkarte> <tab title="Registerkarte 1" template-url="/ansichten/tab1.html"></tab> <tab title="Registerkarte 2" template-url="/ansichten/tab2.html"></tab> <tab title="Registerkarte 3" template-url="/ansichten/tab3.html"></tab> </tabset> [/code]
Was ist mit Lazy Data Loading?
Der kniffligste Teil war, den Teil mit dem faulen Laden herauszufinden. In AngularJS gibt es keine Möglichkeit zu sagen, dass Sie das faule Laden aktivieren möchten. Ich habe den Teil mit dem trägen Laden gelöst, indem ich Angulars ng-include Anweisung. Jedes Mal, wenn eine Registerkarte angeklickt wird, wird die Eigenschaft selected dieser Registerkarte geändert und schließlich die Funktion setTabTemplate aufgerufen, die das src-Attribut der ng-include-Anweisung setzt. Wenn ein ng-include ohne src-Attribut geladen wird, lädt AngularJS nichts. Wenn das src-Attribut gesetzt ist, wird die Vorlage geladen. Im Falle der Registerkarten wird die Vorlage der ausgewählten Registerkarte geladen. So habe ich den Teil mit dem "Lazy Loading" gelöst.
Endlich
Obwohl es in AngularJS keine Standardoption zur Aktivierung von Lazy Loading gibt, können Sie dies mit der Direktive ng-include erreichen. Ich habe einen Ansatz gezeigt, aber es gibt wahrscheinlich auch andere Ansätze.
Ich habe auch ein funktionierendes Beispiel hinzugefügt, das zeigt, dass die Vorlagen nur geladen werden, wenn sie benötigt werden. Bitte sehen Sie sich angularjs-tabs-and-lazy-data-loading auf Github an.
Verfasst von
Arjan Wulder
Unsere Ideen
Weitere Blogs
Contact