angularjs - gridstack - Widgets con diferente contenido dinámico(angular-gridster)

gridstack js template

Question

Intento crear un panel de control web basado en angularjs con un módulo angular gridster. El gridster funciona bien y no tengo problemas para vincular el contenido (como texto o imágenes con ng-bind-html).

Pero, de hecho, no quiero agregar solo texto o imágenes a estos "widgets", estoy intentando crear un tablero con contenido dinámico. Entonces, como usuario, quiero agregar un nuevo widget al tablero y elegir un tipo (por ejemplo, un widget de reloj u otra cosa) y quizás configurar el widget.

El problema es que no sé cómo agregar contenido dinámico (javascript, diferentes elementos html, ...) a un widget. El widget se crea a partir de un objeto de ámbito, como:

$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 }
];

Todavía soy un principiante en angular así que disculpe si esta es una pregunta estúpida ...

¿Cuál podría ser una buena solución para agregar elementos de javascript y html? Directivas? ¿Poseer módulos? ¿Pero cómo?

¡Gracias por tu ayuda!

Answer 1

Para agregar contenido dinámico, tendrá que crear directivas personalizadas para cada widget, y luego hacer referencia a ellas dentro de su objeto standardItems que va a hacer ng-repeat en su cuadrícula gridster.

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

De acuerdo, debería tener una directiva para las definiciones de widgets gridster que tenga un objeto con sus definiciones de widgets personalizadas y quizás algunas opciones de gridster predeterminadas.

Recomiendo crear una directiva widgetBody personalizada a la que hagan referencia todos sus widgets personalizados. Esta directiva también manejará los botones personalizados adjuntos al encabezado de cada widget dependiendo de cómo diseñe sus widgets. También necesitará crear una plantilla asociada para la directiva.

"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);


      }

    }

  }
]);

Después de haber creado su directiva, necesita hacer referencia a esa directiva dentro de su plantilla principal donde está haciendo su gridster ng-repeat para sus widgets personalizados.

 <!-- 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>   

Entonces, por herencia, cada widget personalizado que cree heredará el cuerpo del widget y se compilará y agregará al DOM uno por uno dentro de su directiva ng-repeat.

Espero que esto ayude .... - Curso de plural visión de Mark Zamoyta titulado "Construyendo un marco SPA usando AngularJS