angularjs - gridster2 - gridster fork



Widgets mit unterschiedlichem dynamischen Inhalt(angular-gridster) (1)

Um dynamischen Inhalt hinzuzufügen, müssen Sie benutzerdefinierte Anweisungen für jedes Widget erstellen und sie dann in Ihrem standardItems-Objekt referenzieren, das Sie auf dem Gridster-Gitter ng-repeat verwenden.

scope.standardItems = [{
  title: 'Clock Widget',
  settings: {
    sizeX: 3,
    sizeY: 3,
    minSizeX: 3,
    minSizeY: 3,
    template: '<clock-widget></clock-widget>',
    widgetSettings: {
      id: 1
    }
  }
}]

Ok, Sie sollten eine Direktive für Ihre Getter-Widget-Definitionen haben, die ein Objekt mit Ihren benutzerdefinierten Widgets-Definitionen und vielleicht einige Standard-Optionen für das Gitter hat.

Ich empfehle, eine benutzerdefinierte widgetBody-Direktive zu erstellen, auf die alle benutzerdefinierten Widgets verweisen. Diese Anweisung behandelt auch die benutzerdefinierten Schaltflächen, die an den Header jedes Widgets angehängt sind, je nachdem, wie Sie Ihre Widgets formatieren. Sie müssen auch eine zugehörige Vorlage für die Anweisung erstellen.

"use strict";
angular.module('myGridsterDashboard').directive('widgetBody', ['$compile',
  function($compile) {
    return {
      templateUrl: 'widgetBodyTemplate.html',
      link: function(scope, element, attrs) {
        // create a new angular element from the resource in the
        // inherited scope object so it can compile the element 
        // the item element represents the custom widgets
        var newEl = angular.element(scope.item.template);
        // using jQuery after new element creation, to append element
        element.append(newEl);
        // returns a function that is looking for scope
        // use angular compile service to instanitate a new widget element
        $compile(newEl)(scope);


      }

    }

  }
]);

Nachdem Sie Ihre Direktive erstellt haben, müssen Sie auf diese Direktive in Ihrer Hauptvorlage verweisen, wo Sie Ihre gitter-Wiederholungsroutine für Ihre benutzerdefinierten Widgets ausführen.

 <!-- reference your default gridster options if you created some -->
<div gridster="gridsterOpts">
<ul>
    <li gridster-item="item" ng-repeat="item in standardItems">
        <!-- created a custom directive to compile the widget body and keep it out of the dashboard object -->
        <widget-body></widget-body>
    </li>
</ul>   

So vererbt nun jedes benutzerdefinierte Widget, das Sie erstellen, den Widget-Textkörper und wird kompiliert und einzeln innerhalb der ng-repeat-Anweisung zum DOM hinzugefügt.

Hoffe, das hilft ... - Pluralsight-Kurs von Mark Zamoyta mit dem Titel "Aufbau eines SPA-Frameworks mit AngularJS

Ich versuche ein Web-Dashboard basierend auf angularjs mit angular-gridster-Modul zu erstellen. Der Graster funktioniert gut und ich habe keine Probleme, Inhalte an ihn zu binden (wie Text oder Bilder mit ng-bind-html).

Aber eigentlich möchte ich diesen "Widgets" nicht nur Text oder Bilder hinzufügen, ich versuche ein Dashboard mit dynamischem Inhalt zu erstellen. Also, als Benutzer möchte ich ein neues Widget zum Dashboard hinzufügen und einen Typ auswählen (zum Beispiel ein Uhr-Widget oder etwas anderes) und vielleicht das Widget konfigurieren.

Das Problem ist, dass ich nicht weiß, wie man dynamischen Inhalt (Javascript, verschiedene HTML-Elemente, ...) zu einem Widget hinzufügt. Das Widget wird außerhalb eines Bereichsobjekts erstellt, z. B .:

$scope.standardItems = [
    { name: "Item 1", content: "Text 1", sizeX: 2, sizeY: 1, row: 0, col: 0 },
    { name: "Item 2", content: "Clock widget", sizeX: 2, sizeY: 2, row: 0, col: 2 }
];

Ich bin immer noch ein Anfänger in eckigen so entschuldigen Sie mich, wenn das eine dumme Frage ist ...

Was könnte eine gute Lösung sein, um Javascript und HTML-Elemente hinzuzufügen? Richtlinien? Eigene Module? Aber wie?

Danke für Ihre Hilfe!





dynamic-content