Dynamische Menüleiste mit angularjs

Ich versuche ein Menü zu erstellen-bar mit Angularjs. Hab ich gemacht ähnliche Dinge, bevor Sie mit Backbonejs, aber ich habe eine harte Zeit, meinen Kopf um, wie dies mit den eckigen.

In meinem html - Datei habe ich folgende Menü-Platzhalter.

<div id='menu1'></div>
<div id='menu2'></div>
<div id='menu3'></div>
<div id='menu4'></div>
<div id='menu5'></div>

Einer Reihe von meinen eckigen Modulen ein Menü hinzufügen, wenn Sie geladen werden (in run). Jeder von Ihnen behält sich nur einen bestimmten slot (d.h. menu1..5), sodass Sie nicht aufeinandertreffen. Wenn einige Module nicht geladen, deren Menü nicht angezeigt, in der Menüleiste.

Winkel-Modul ist konzeptionell Aussehen:

angular.module('myModule3', [])
  .service('someService', function($http) {
    //get some data to populate menu (use $http)
    this.menuItems = ['orange', 'apple', 'banana']
  })

  .run(['someService', function(someService) {
    //create a rendered menu item
    ...
    //insert it at id="menu3"
  })

Zur Vereinfachung der erbrachten Menüpunkt Aussehen soll:

  <ul>
    <li>organge</li>
    <li>apple</li>
    <li>banana</li>
  </ul>

Ich bin ziemlich neu zu eckig, so dass ich nicht wirklich wissen, wo zu beginnen. Ich habe gelesen, bis auf directives, aber nicht sehen, wie Sie passen, wie Sie erfordern eine benutzerdefinierte markup (vielleicht ein benutzerdefiniertes Menü-tag mit dem DOM-Ziel (d.h. menu..5). Auch, wie verbinden Sie dies mit einem controller ist mir nicht klar.

Update
Zusätzlich zu den oben genannten base template (mit willkürlichen Ankerpunkten im DOM) und die Richtlinie (die produzieren ein DOM-element, das eingefügt werden an diesen Anker-Punkte), eine Vorlage erleichtert Ihnen die Erstellung des DOM-Elements. Diese Vorlage wird in einem separaten file mit der position der Richtlinie DOM-element eingefügt, um (im Gegensatz zu den üblichen Fall von Richtlinien, in denen eine bereits vorhandene Markierung wird ersetzt/eingefügt-spezifischen markup-entspricht der Richtlinie zur definition:

<menu ng-model="Model3DataService" target="#menu3">
  <ul>
    <li ng-repeat="for item in items"></li>
  </ul>
</menu>

Wieder, aus einem Backbone/jquery hintergrund, das macht Sinn, aber das kann nicht sein, das richtige zu tun, in eckig. Wenn ja, bitte lassen Sie mich wissen, wie ich könnte zu halten die Basis-Vorlage frei von jeglichen wissen über die Module und Annahmen, wo Sie Ihre Menü (d.h. die Nut der Menüleiste auf Sie reservieren). Ich bin froh zu hören, über andere Lösungen...

InformationsquelleAutor orange | 2013-10-11

  1. 5

    Jedes Modul muss mit seinem Menü loader definiert:

    angular.module('module1', []).

factory('module1.menuLoader', function() {
    return function(callback) {
        callback(['oranges', 'bananas'])
    }
});

    Ihre Bewerbung sollte Folgendes enthalten: Menü-Richtlinie, die laden können Menü-Einträge für alle module, nur wenn vorhanden.

    angular.module('app', ['module1']).

directive('menu', ['$injector', function($injector) {
    return {
        restrict: 'A',
        template: 
            '<ul><li ng-repeat="item in items">{{item}}</li></ul>',
        scope: {},
        link: function($scope, $element, $attrs) {
            var menuLoaderName = $attrs.menu+'.menuLoader';
            if ($injector.has(menuLoaderName)) {
                var loaderFn = $injector.get(menuLoaderName);
                loaderFn(function(menuItems) {
                    $scope.items = menuItems;
                });
            }
        }
    };
}]);

    Final html:

    <div class="content">
    <div menu="module1"></div>
    <div menu="module2"></div>
    <div menu="module3"></div>
</div>

    Nachdem Sie die Anwendung ausführen, nur module1 Menü geladen werden. Weitere Menü-Platzhalter bleiben leer.

    Live-demo: http://plnkr.co/edit/4tZQGSkJToGCirQ1cmb6

    Aktualisiert: Wenn Sie möchten, zum erzeugen einer Markierung auf der Modul-Seite der beste Weg ist, um die Vorlage auf die $templateCache in dem Modul, wo Sie definiert und dann übergeben Sie den templateName der Anwendung.

    angular.module('module1', []).

factory('module1.menuLoader', ['$templateCache', function($templateCache) {
    $templateCache.put('module1Menu', '<ul><li ng-repeat="item in items">{{item}}</li></ul>');
    return function(callback) {
        callback('module1Menu', ['oranges', 'bananas'])
    }
}]);


angular.module('app', ['module1'])

.directive('menu', ['$injector', function($injector) {
    return {
        restrict: 'A',
        template: 
            '<div ng-include="menuTemplate"></div>',
        scope: {},
        link: function($scope, $element, $attrs) {
            var menuLoaderName = $attrs.menu+'.menuLoader';
            if ($injector.has(menuLoaderName)) {
                var loaderFn = $injector.get(menuLoaderName);
                loaderFn(function(menuTemplate, menuItems) {
                    $scope.menuTemplate = menuTemplate;
                    $scope.items = menuItems;
                });
            }
        }
    };
}]);
    In meinem Fall, würde ich mag zu halten die Basis-template, in dem das Menü Platzhalter sind definiert Modul Agnostiker, d.h. die Verknüpfung zu einem bestimmten Platzhalter kommen sollte aus der definition der Menüs (im Modul). Das markup für das Menü (wieder definiert in jedem Modul), könnte <menu target="menu1></menu> (das bezieht sich auf die divs in meinem Beispiel).
    Sie können generieren markup auf der Modul-Seite. Siehe meine aktualisierte Antwort.
    Danke, das ist immer in der Nähe, was ich ins Auge gefasst. Das einzige problem Links ist die <div menu="module1"></div> auf der Basis template Seite. Es wäre viel schöner, wenn Sie nur gewöhnliche ids und man konnte angeben, das Ziel (der Ort, wo das Menü ist immer eingefügt) auf der client-Seite.
    Wenn Sie möchten, dass id dann ändern $attrs.menu zu $attrs.id. Wenn Sie möchten <menu> statt <div> ändern restrict: 'A' zu restrict 'E'.
    Wir reden nicht über die gleiche Sache hier. In das Modul, ich will Sie wo legen Sie im Menü in der Basis-Vorlage beispielsweise durch Angabe eines id. In Ihrem Fall, Sie bereits machen Sie diese Entscheidung in die base template. Bitte haben Sie einen Blick auf mein update.

    InformationsquelleAutor kseb

Schreibe einen Kommentar