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

Question

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

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

问题是我不知道如何将动态内容（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 }
];

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

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

感谢您的帮助！

Answer 1

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

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

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

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

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

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

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