Angular directive to add content rather than overwrite

Question

I am trying to write a directive that will show a "loading" message over a div while the data is fetched from the server.

Thus far I've managed to get this:

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

loadingPanelBox.html has this:

<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>

This actually does most of what I want, the panel is shown until the data is returned at which point it disappears.

Unfortunately it also overwrites the contents of the div it's placed on, so in this instance:

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

the Hello There is never seen. This seems to be a function of my using a template.

Is there a way of stopping this overwriting happening or maybe some way of adding the content other than with a template.

Answer 1

Thanks to @Amiros I've made it work slightly differently.

Here's the directive and controller code:

.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'
    };
})

The html file is:

<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>

which is pretty simple and means that the usage is as follows:

        <div class="panel-body">
            <data-loading-panel panel-data="myData" loading-message="Loading Data"></data-loading-panel>
            {{myData}}
        </div>  

Answer 2

I use this:

BlockUI

This is a module which is very easy to use. There is a nice tutorial on the page that fills all of your needs.