0

我正在尝试编写一个指令，该指令将在从服务器获取数据时在 div 上显示“加载”消息。

到目前为止，我已经设法得到这个：

.directive('dataLoadingPanel', function () {
        return {
            templateUrl: '/Utilities/loadingPanelBox.html',
            scope: {
                panelData: '=',
                loadingMessage: "@"
            }
        };
    })

loadingPanelBox.html 有这个：

<div class="modal-dialog" style="background-color: white;width:300px;height:46px;padding-top:16px;top:30px;padding-left:40px;border-radius: 4px;" ng-hide="panelData">
        <img src="/images/BlueSpinner.gif" style="margin-top:-2px" />&nbsp;{{loadingMessage}}
</div>

这实际上完成了我想要的大部分工作，显示面板，直到返回数据时它消失。

不幸的是，它也会覆盖它所在的 div 的内容，所以在这种情况下：

<div data-loading-panel panel-data="myData" loading-message="Loading Data">Hello There</div>

你好，从来没有见过。这似乎是我使用模板的功能。

有没有办法阻止这种覆盖的发生，或者除了使用模板之外，还有什么方法可以添加内容。

4

2 回答 2

1

我用这个：

块UI

这是一个非常易于使用的模块。页面上有一个很好的教程，可以满足您的所有需求。

于 2014-04-16T17:01:07.667 回答
0

感谢@Amiros，我让它的工作方式略有不同。

这是指令和控制器代码：

.controller('dataLoadingPanelController', [
'$scope', '$timeout', function($scope, $timeout) {
$timeout(function() {
     $scope.setBoxSize();
});

} ])
.directive('dataLoadingPanel', function () {
    return {
        restrict: 'EA',
        scope: {
            panelData: '=',
            loadingMessage: "@"
        },
        templateUrl: '/Content/Utilities/loadingPanelBox.html',
        link: function (scope, element, attr) {
            var elMessage = element.find('.loading-message-area');
            var elBox = element.find('.loading-dialog');
            scope.setBoxSize = function() {
                var messageSize = parseInt(elMessage.css('width').replace(/px$/, ""));
                var parentSize = parseInt(element.parent().css('width').replace(/px$/, ""))
                var newBoxSize = messageSize + 70;
                elBox.css('width', newBoxSize + 'px');
                var newBoxPosition = (parentSize / 2) - (newBoxSize / 2);
                elBox.css('margin-left', newBoxPosition + 'px');
            };
        },
        controller: 'dataLoadingPanelController'
    };
})

html文件是：

<div style="position:absolute;color:black;font-weight:normal;">
    <div class="modal-dialog loading-dialog" style="border:1px solid #1f4e6c;background-color: white;height:46px;padding-top:14px;top:30px;padding-left:20px;border-radius: 4px;" ng-hide="panelData">
        <img src="/images/BlueSpinner.gif" style="margin-top:-2px" />&nbsp;<span class="loading-message-area">{{loadingMessage}}</span>
    </div>
</div>

这非常简单，意味着用法如下：

        <div class="panel-body">
            <data-loading-panel panel-data="myData" loading-message="Loading Data"></data-loading-panel>
            {{myData}}
        </div>
于 2014-04-17T10:26:30.420 回答