Question

我试图将mdPanel放在mdDialog内的文本框下面，但mdPanel总是位于mdDialog的左下角。我做错了什么？

组件html：

<div class="hide">
<div id="dialogSpotlight" class="md-dialog-container">
    <md-dialog>
        <md-toolbar class="md-accent">
            <div class="md-toolbar-tools">
                <h4>@ResourceManager.GetLiteral("SpotlightComponentSearch")</h4>
                <span flex></span>
                <md-button class="md-icon-button">
                    <md-icon class="material-icons" ng-click="$ctrl.closeDialog()">close</md-icon>
                </md-button>
            </div>
        </md-toolbar>
        <div layout="row" layout-align="center center" layout-padding>
            <md-input-container id="spotlight-component-dialog-input-search-container" flex="80">
                <label>&nbsp;</label>
                <input placeholder="Buscar" ng-model="$ctrl.searchedText" ng-keypress="$ctrl.keyPress($event)" ng-keyup="$ctrl.keyUp($event)" />
            </md-input-container>
            <md-button class="md-icon-button" flex="20">
                <md-icon class="material-icons">search</md-icon>
            </md-button>
        </div>
        <div>

mdPanel config

function openPanel(position) {
    var config = {
        attachTo: angular.element(document.body),
        templateUrl: 'templates/shared/spotlightPanel',
        controller: PanelController,
        controllerAs: '$panelCtrl',
        position: position,
        clickOutsideToClose: true,
        escapeToClose: true,
        focusOnOpen: false,
        zIndex: 89,
        locals: {
            data: {
                properties: $ctrl.properties,
                demands: $ctrl.demands,
                people: $ctrl.people,
                propertiesOwners: $ctrl.propertiesOwners,
                demandsOwners: $ctrl.demandsOwners,
                peopleCategories: $ctrl.peopleCategories,
                searchedText: $ctrl.searchedText
            },
            showProperties: $ctrl.showProperties,
            showDemands: $ctrl.showDemands,
            showPeople: $ctrl.showPeople,
            showWheel: $ctrl.showWheel,
            callbacks: {
                propertyCallback: $ctrl.propertyCallback,
                propertyOwnerCallback: $ctrl.propertyOwnerCallback,
                demandCallback: $ctrl.demandCallback,
                demandOwnerCallback: $ctrl.demandOwnerCallback,
                peopleCallback: $ctrl.peopleCallback,
                peopleCategoryCallback: $ctrl.peopleCategoryCallback
            }
        }
    }

    if ($spotlightComponentPanelRef != null) {
        $spotlightComponentPanelRef.close();
    }

    $ctrl._mdPanel.open(config)
        .then(function (result) {
            $spotlightComponentPanelRef = result;
        });
}
}

打开mdPanel的功能

function checkAllSearched($ctrl) {
var allLoaded = true;
var relativeElementID = "spotlight-component-dialog-panel-content";

for (var i = 0; i < $ctrl.allSearched.length; i++) {
    if ($ctrl.allSearched[i] == false) {
        allLoaded = false;
    }
}

if (allLoaded) {
    var position = $ctrl._mdPanel.newPanelPosition()
    .relativeTo("#" + relativeElementID)
    .addPanelPosition($ctrl._mdPanel.xPosition.ALIGN_START, $ctrl._mdPanel.yPosition.BELOW);

    $ctrl.openPanel(position);
}
}

Answer 1

最后，在阅读了一千篇文章后，我得出的结论是不可能做我正在尝试的事情。

这是一个死胡同

将mdPanel定位在mdDialog中

1 个答案: