添加内容而不是覆盖的角指令

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>

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

是否有一种方法可以阻止这种覆盖发生，或者是否有某种方式添加内容，而不是使用模板。

Answer 1

多亏了@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>  

Answer 2

我用这个：

BlockUI

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