用不同的动态内容（角gridster）小工具 [英] Widgets with different dynamic content (angular-gridster)
问题描述
我想基于对角gridster模块angularjs创建一个Web仪表板。该gridster工作正常，我没有任何问题，结合内容给它（如文本或图像与NG-的bind-HTML）。
但事实上我并不想只文本或图像添加到这些小部件，我试图创建一个含有动态内容的仪表板。所以，作为一个用户我想一个新的窗口小部件添加到仪表盘，并选择一种类型（例如时钟Widget或别的东西），也许配置部件。
问题是，我不知道如何动态内容（JavaScript的，不同的HTML元素，...）添加到一个小部件。窗口小部件创建了一个范围对象，如：
$ scope.standardItems = [
{名：项目1，内容：文本1，SIZEX：2，SIZEY：1，行：0，列：0}，
{名：项目2，内容：时钟小工具，SIZEX：2，SIZEY：2，行：0，列：2}
];
我仍然在一个初学者的角度，以便原谅我，如果这是一个愚蠢的问题...
什么可能是一个很好的解决方案中添加JavaScript和HTML元素呢？指令？自己的模块？但如何？
感谢您的帮助！
在-为了添加动态内容，你必须创建一个自定义的指令为每个插件，然后引用它们里面的standardItems对象，你要NG-重复您gridster网格。
scope.standardItems = {[\r
标题：时钟小工具，\r
设置：{\r
SIZEX：3，\r
SIZEY：3，\r
minSizeX：3，\r
minSizeY：3，\r
模板：'＆LT;时钟部件＆GT;＆LT; /时钟部件＆GT;，\r
widgetSettings：{\r
ID：1\r
}\r
}\r
}] \r
好吧，你应该有一个具有对象与您的自定义小部件的定义，也许一些默认选项gridster您gridster小部件定义一个指令。
我建议创建一个自定义widgetBody指令，所有的自定义窗口小部件将引用。该指令也将取决于你如何风格你处理部件连接到每个插件的标头中的自定义按钮。您还需要创建指令相关联的模板。
使用严格的;\r
angular.module（'myGridsterDashboard'）。指令（widgetBody'，['$编译，\r
功能（$编译）{\r
返回{\r
templateUrl：widgetBodyTemplate.html'，\r
链接：功能（范围，元素，ATTRS）{\r
//从资源创建一个新的角度元素\r
//继承范围的对象，因此它可以编译元素\r
// item元素重新presents的自定义部件\r
VAR墩= angular.element（scope.item.template）;\r
//使用jQuery后，新元素创作，追加要素\r
element.append（墩）;\r
//返回寻找范围功能\r
//使用角度编译服务instanitate一个新的widget元素\r
$编译（墩）（范围）;\r
\r
\r
}\r
\r
}\r
\r
}\r
]）; \r
您已经创建了您的指令后，那么你需要参考您的主模板内的指令，你正在做你gridster NG重复您的自定义窗口小部件。
＆LT;！ - 引用您的默认gridster选择，如果你创建了一些 - ＆GT;
＆LT; DIV gridster =gridsterOpts＆GT;
＆LT; UL＆GT;
＆LT;李gridster项=项目NG重复= GT在standardItems项目＆;
＆LT;！ - 创建一个自定义指令编译控件的身体和保持它的仪表盘对象 - ＆GT;
＆LT;小工具体＆GT;＆LT; /部件体＆GT;
＆LT; /李＆GT;
＆LT; / UL＆GT;
所以，现在通过继承您创建将继承控件身体会得到编译并添加到您的NG-重复指令的DOM一个接一个进去。每个自定义部件
希望这有助于....
- Pluralsight当然马克Zamoyta题为建立一个SPA框架使用AngularJS
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.
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...
What could be a good solution to add javascript and html elements? Directives? Own Modules? But how?
Thank you for your help!
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
}
}
}]
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.
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);
}
}
}
]);
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>
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.
Hope this helps.... - Pluralsight course by Mark Zamoyta entitled "Building a SPA framework Using AngularJS
这篇关于用不同的动态内容（角gridster）小工具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
