Виджеты с различным динамическим контентом (угловой-сетчатой)

Question

Я пытаюсь создать веб-панель на основе угловых с угловым сетчатым модулем. Сетчатка отлично работает, и у меня нет никаких проблем с привязкой к ней контента (например, текст или изображения с помощью 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

Чтобы добавить динамический контент, вам нужно будет создать пользовательские директивы для каждого виджета, а затем ссылаться на них в свой объект standardItems, который вы собираетесь на ng-repeat в сетке сетки.

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 нг-повтор для пользовательских виджетов.

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

Так что теперь по наследству каждый пользовательский виджет, который вы создаете, будет наследовать тело виджета и компилируются и добавлены к DOM один за другим внутри вашего нг повтора директивы.

Надеется, что это помогает .... - Pluralsight курс Марке Zamoyta праву фиктивного „-timeline-директиве Она работает«Создание основы SPA Использование AngularJS