Question

我很难搞清楚我的AngularJs单页中要做什么。我使用ng-repeat来显示许多小部件。该插件是＆＃34; Jarvis widget v2.0 ＆＃34;。我的问题是，文章容器没有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

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

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

最好的选择是将调用$('#widget-grid').jarvisWidgets()提取到指令中。你可以用获取当前的$（元素）替换$('#widget-grid')，因此它只绑定到当前元素而不是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();
    });
    ...
}

Answer 2

好的，在Darneas的帮助下，我想出了一个解决方案。

我实现了这个：：Calling a function when ng-repeat has finished
我确保＆＃34; widget-grid＆＃34;没有初始化（我有一些测试小部件）
我打电话给＃34; setup_widgets_desktop（）＆＃34;来自ngRepeatFinished

这是成功的。谢谢Darneas。否则我不会找到解决方案。

我无法使widget命令工作，这看起来也是一个很好的解决方案。

Jarvis.widget不会在AngularJS ng-repeat中呈现

2 个答案: