具有不同动态内容的小部件 (angular-gridster)

Question

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

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

问题是我不知道如何向小部件添加动态内容（javascript、不同的 html 元素...）。该小部件是从范围对象创建的，例如：

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

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

添加 javascript 和 html 元素的好的解决方案是什么？指令？自己的模块？但是怎么办？

感谢您的帮助！

Answer 1

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

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

好的，您应该有一个用于您的 gridster 小部件定义的指令，该指令具有 object 以及您的自定义小部件定义和一些默认的 gridster 选项。

我建议创建一个自定义 widgetBody 指令，您的所有自定义小部件都将引用该指令。该指令还将处理附加到每个小部件 header 的自定义按钮，具体取决于您如何设置小部件的样式。您还需要为指令创建关联模板。

"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。

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

现在通过继承，您创建的每个自定义小部件都将继承小部件 body 并将被编译并添加到 DOM one-by-one 中 ng-repeat指令。

希望这对您有所帮助.... - Mark Zamoyta 的 Pluralsight 课程题为“使用 AngularJS

构建 SPA 框架

具有不同动态内容的小部件 (angular-gridster)

Widgets with different dynamic content (angular-gridster)

widget

dynamic-content

angularjs

gridster