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>

Hello Thereは見られません。これは、テンプレートを使用した機能のようです。

この上書きの発生を止める方法や、テンプレート以外のコンテンツを追加する方法はありますか?

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 に答える