Question

我正在尝试编写一个指令，当从服务器获取数据时，该指令将在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>

从未见过 Hello There 。这似乎是我使用模板的功能。

有没有办法阻止这种覆盖的发生，或者某种方式可以添加除模板之外的其他内容。

Answer 1

我用这个：

BlockUI

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

Answer 2

感谢@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>

Angular指令添加内容而不是覆盖

2 个答案: