具有不同动态内容的小部件 (angular-gridster) [英] Widgets with different dynamic content (angular-gridster)

问题描述

我正在尝试使用 angular-gridster 模块创建基于 angularjs 的 Web 仪表板.gridster 工作正常，我在绑定内容时没有任何问题(例如带有 ng-bind-html 的文本或图像).

I am trying to create a web dashboard based on angularjs with angular-gridster module. The gridster works fine and I don't have any problems binding content to it (like text or images with ng-bind-html).

但实际上我不想只向这些小部件"添加文本或图像，我正在尝试创建一个包含动态内容的仪表板.因此，作为用户，我想向仪表板添加一个新的小部件并选择一种类型(例如时钟小部件或其他东西)并可能配置小部件.

But in fact I don't want to add only text or images to these "widgets", I'm trying to create a dashboard with dynamic content in it. So, as a user I want to add a new widget to the dashboard and choose a type (for example a clock-widget or something else) and maybe configure the widget.

问题是我不知道如何将动态内容(javascript、不同的 html 元素，...)添加到小部件.小部件是在范围对象之外创建的，例如:

The problem is that I don't know how to add dynamic content (javascript, different html elements, ...) to a widget. The widget is created out of a scope object, like:

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

我仍然是角度的初学者，如果这是一个愚蠢的问题，请原谅......

I am still a beginner in angular so excuse me if this is a stupid question...

添加 javascript 和 html 元素的最佳解决方案是什么?指令?自己的模块?但是怎么做呢?

What could be a good solution to add javascript and html elements? Directives? Own Modules? But how?

感谢您的帮助！

推荐答案

为了添加动态内容，您必须为每个小部件创建自定义指令，然后在您将要 ng-repeat 的 standardItems 对象中引用它们在你的 gridster 网格上.

In-order to add dynamic content you will have to create custom directives for each widget, then reference them inside your standardItems object that your are going to ng-repeat on your gridster grid.

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

好的，您应该有一个用于您的 gridster 小部件定义的指令，该指令包含一个带有您的自定义小部件定义的对象，也许还有一些默认的 gridster 选项.

Ok, you should have a directive for your gridster widget definitions that has an object with your custom widgets definitions and maybe some default gridster options.

我建议创建一个自定义 widgetBody 指令，您的所有自定义小部件都将引用该指令.该指令还将根据您的小部件样式处理附加到每个小部件标题的自定义按钮.您还需要为指令创建一个关联的模板.

I recommend creating a custom widgetBody directive that all of your custom widgets will reference. This directive will also handle the custom buttons attached to each widget's header depending on how you style your widgets. You will also need to create an associated template for the directive.

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


      }

    }

  }
]);

创建指令后，您需要在主模板中引用该指令，您正在为您的自定义小部件执行 gridster ng-repeat.

After you have created your directive, then you need to reference that directive inside your main template where you are doing your gridster ng-repeat for your custom widgets.

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

因此，现在通过继承，您创建的每个自定义小部件都将继承小部件主体，并将在您的 ng-repeat 指令中逐一编译并添加到 DOM.

So now by inheritance each custom widget that you create will inherit the widget body and will get compiled and added to the DOM one-by-one inside of your ng-repeat directive.

希望这会有所帮助....- Mark Zamoyta 的 Pluralsight 课程，题为使用 AngularJS 构建 SPA 框架

Hope this helps.... - Pluralsight course by Mark Zamoyta entitled "Building a SPA framework Using AngularJS

这篇关于具有不同动态内容的小部件 (angular-gridster)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！