javascript - Jarvis.widget无法在AngularJS ng-repeat中呈现

我很难在AngularJs单页中弄清楚该做什么。我使用ng-repeat显示许多小部件。插件是“ Jarvis小部件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>

这是我的第一篇文章，因此，如果我忘记了某些内容，请提前致歉。

最佳答案

function setup_widgets_desktop()中的代码将基于当前（！）HTML内容创建窗口小部件。由于ng-repeat将在HTTP请求成功后呈现您的元素，因此在调用该函数时不存在任何元素。

为了实现所需的行为，请在回调返回后再次执行setup_widgets_desktop()。您可能需要使用$timeout(setup_widgets_desktop, 1000)确保它被延迟。我以这种方式使用它，但是不确定是否有延迟的一般要求。

最好的选择是将调用$('#widget-grid').jarvisWidgets()提取到指令中。您可以将$('#widget-grid')替换为获取当前的$（element），因此它仅绑定到当前元素，而不绑定到DOM中的某些固定ID。如果您需要更多建议，请给我留言。

编辑（示例代码）：

在我的项目中，我正在使用以下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();
    });
    ...
}

关于javascript - Jarvis.widget无法在AngularJS ng-repeat中呈现，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24957729/