Jarvis.widget не отображается в AngularJS ng-repeat

Question

Мне трудно понять, что делать на моей одностраничной странице AngularJ. я использую ng-repeat для отображения количества виджетов. Плагин "Jarvis widget v2.0". Моя проблема в том, что контейнер статьи не имеет функциональности из виджета Jarvis (полный экран, сворачивание и т. Д.).

Данные задерживаются из-за вызова HTTP GET. Если я жестко закодирую dataSeries, он работает на 100%, но кажется, что виджеты Jarvis отрисовываются до успеха HTTP GET. Я пытался найти решение в течение нескольких дней, и я думаю, что директива является решением, но я потерян!

<article class="col-xs-12 col-sm-12 col-md-6 col-lg-6" ng-repeat="chart in dataSeries">
       <div class="jarviswidget" id="wid-id-02" data-widget-editbutton="false" data-widget-colorbutton="false" data-widget-deletebutton="false"></div>
</article>

Это мой первый пост, поэтому, если я что-то забыл, заранее извиняюсь.

Answer 1

Хорошо, с помощью Darneas я нашел решение.

1. Я реализовал это:: вызов функции после завершения ng-repeat
2. Я убедился, что "widget-grid" не был инициализирован (у меня было несколько тестовых виджетов)
3. Я вызвал "setup_widgets_desktop()" из ngRepeatFinished

Это было успешно. Спасибо, Дарнеас. Я бы не нашел решение иначе.

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

Answer 2

Код внутри function setup_widgets_desktop() собирается создавать виджеты на основе текущего (!) содержимого HTML. Как ng-repeat отобразит ваш элемент после успешного выполнения вашего HTTP-запроса, при вызове функции элементов не будет.

Чтобы добиться желаемого поведения, выполните setup_widgets_desktop() снова после вашего обратного вызова. Возможно, вам необходимо убедиться, что он задерживается с помощью $timeout(setup_widgets_desktop, 1000), Я использую это таким образом, но не уверен, является ли это общим требованием иметь задержку.

Лучшим вариантом будет извлечь звонок $('#widget-grid').jarvisWidgets() в директиву. Вы могли бы заменить $('#widget-grid') с получением текущего $(элемента), поэтому он привязан только к текущему элементу, а не к некоторому фиксированному идентификатору внутри DOM. Если вам нужно больше советов по этому поводу, просто напишите мне.

Изменить (пример кода):

В моем проекте я использую следующий сервис Angular (вам нужно заменить yourApp, HTTP URI и селектор jQuery на ваши потребности):

(function(yourApp) {
    "use strict";
    yourApp.factory("presenter", function ($timeout) {
        var layout = function () {
            $("#widgets-grid").jarvisWidgets({
                grid: "article",
                widgets: '.jarviswidget',
                localStorage: false,
//                deleteSettingsKey: '#deletesettingskey-options',
//                settingsKeyLabel: 'Reset settings?',
//                deletePositionKey: '#deletepositionkey-options',
//                positionKeyLabel: 'Reset position?',
                sortable: false,
                buttonsHidden: false,
                // toggle button
                toggleButton: false,
                toggleClass: 'fa fa-minus | fa fa-plus',
                toggleSpeed: 200,
                onToggle: function () {
                },
                // delete btn
                deleteButton: false,
                deleteClass: 'fa fa-times',
                deleteSpeed: 200,
                onDelete: function () {
                },
                // edit btn
                editButton: false,
                editPlaceholder: '.jarviswidget-editbox',
                editClass: 'fa fa-cog | fa fa-save',
                editSpeed: 200,
                onEdit: function () {
                },
                colorButton: false,
                // full screen
                fullscreenButton: true,
                fullscreenClass: 'fa fa-expand | fa fa-compress',
                fullscreenDiff: 3,
                onFullscreen: function (e) {
                },
                // order
                buttonOrder: '%refresh% %custom% %edit% %toggle% %fullscreen% %delete%',
                opacity: 1.0,
                dragHandle: '> header',
                placeholderClass: 'jarviswidget-placeholder',
                indicator: true,
                indicatorTime: 600,
                ajax: true,
                timestampPlaceholder: '.jarviswidget-timestamp',
                timestampFormat: 'Last update: %m%/%d%/%y% %h%:%i%:%s%',
                refreshButton: true,
                refreshButtonClass: 'fa fa-refresh',
                labelError: 'Sorry but there was a error:',
                labelUpdated: 'Last Update:',
                labelRefresh: 'Refresh',
                labelDelete: 'Delete widget:',
                afterLoad: function () {
                },
                rtl: false, // best not to toggle this!
                onChange: function () {
                },
                onSave: function () {
                },
                ajaxnav: $.navAsAjax // declears how the localstorage should be saved
            });
        }

        return {
            layout: function() {
                $timeout(layout, 1000);
            }
        };
    });
})(window.yourApp);

Ваш контроллер должен выглядеть следующим образом:

function($scope, $http, presenter) {
    ...
    $http("api/data").success(function(data) {
        $scope.dataSeries= data;
        presenter.layout();
    });
    ...
}