需要angularJS下拉宽度，以填补整个画面由远到左边最右边。

问题描述

我有一个有水平导航栏的anglarJS项目。导航栏中的每个元素都是一个类别，并使用angularJS下拉指令显示子该类别。

I have an anglarJS project that has a horizontal navigation bar. Each element in the navigation bar is a category and uses an angularJS dropdown directive to show the subcategories for that category.

我想下拉从左至右以填充整个屏幕。目前下拉决定了它是一个从CSS最小宽度属性的宽度。这并没有解决我的愿望的下拉菜单以填充整个屏幕，我看到一些网站做到这一点，不知道是否有一种方法可以迫使我的下拉列表填充整个屏幕从左至右。

I would like the drop down to fill the whole screen from left to right. Currently the drop down determines it's width from the css "min-width" property. This does not solve my desire for the drop down menu to fill the whole screen I have seen some websites do this, and was wondering if there is a way to force my dropdown to fill the whole screen from left to right.

下面是页面的HTML /下拉包括指定的下拉宽度的CSS。

Here is the html for the page/drop down including the css that specifies the dropdown width.

下面是下拉的图片一次。我加了蓝色箭头指示我的意思，当我想下拉到充满整个屏幕。

Here is a picture of the dropdown again. I added blue arrows to indicate what I mean when I want the drop down to fill the whole screen.

这些照片是pretty分辨率高，显示你所有的细节。页是相当复杂的，试图在一个plunker复制。

The pictures are pretty high resolution and show you all the details. The page is rather complex to try and replicated in a plunker.

整个事情需要作出反应，以及，不基于引导3和AngularJS引导的。

The whole thing needs to be responsive as well, and is based off of Bootstrap 3 and AngularJS Bootstrap.

感谢您的帮助，您可以给！

Thanks for any help you can give!

大卫

推荐答案

我找到了解决问题的办法。

I found a solution for the problem.

我创建的浮动左边是在同一行作为在中心的按钮组一个按钮组。该浮动左边的按钮组只包含一个按钮，该按钮都有它的可见性设置为隐藏。
你具有连接到该按钮，而不是在中心的那些的下拉中，由于下拉将不启动任何更远左比它被连接到按钮的开头。

I created a button group that floats left that is on the same row as the button group in the center. The button group that floats left only contains one button, and that button has it's visibility set to hidden.You have the dropdown attached to this button, rather than the ones in the center, since the dropdown won't start any farther left than the beginning of the button it is attached to.

<div class="pull-left">
        <div class="btn-group" dropdown is-open="isOpen">
            <button type="button" style="visibility: hidden" class="btn btn-link dropdown-toggle filter-criteria-variety-category-name" dropdown-toggle ng-disabled="disabled">
                <span class="caret"></span>
            </button>

            <div class="dropdown-menu top-level-category-drop-down-standard" ng-style="{{windowWidth}}" ng-click="$event.stopPropagation()" >
                <div ng-click="$event.stopPropagation()"  ng-mouseleave="close()" ng-mouseenter="keepOpen()">
                    <div ng-if="currentCategory != undefined">
                        <horizontal-menu-inner close-drop-down-menu=$parent.closeDropDownMenu top-level-category=$parent.currentCategory></horizontal-menu-inner>
                    </div>

                </div>
            </div>
        </div>
    </div>

和包含您的类别要触发您通过ioOpen可变进中心的按钮指令作为一个属性下拉居中按钮组。

And for the centered button group that contains your categories you want to trigger the dropdown you pass the 'ioOpen' variable into the centered button directive as an attribute.

<div class="text-center">
        <div  class="btn-group">
            <div class="horizontal-top-level-category" ng-repeat="topLevelCategory in categoryNavigationGraph">
                <horizontal-top-level-category is-open=$parent.isOpen current-category-id=$parent.currentCategoryId top-level-category=topLevelCategory></horizontal-top-level-category>
            </div>
        </div>
    </div>

您已经然后该指令设置来关闭或打开下拉取决于是否鼠标进入或离开该指令按钮

You then have that directive set up to close or open the drop down depending on whether the mouse enters or leaves the button in that directive

<button ng-mousemove="activeMenuItemm()" ng-mouseleave="close($event)" ng-mouseenter="open()" type="button"  ng-class="{'filter-criteria-variety-category-name-hover': filterCriteriaCategoryActive}"   class="btn btn-link dropdown-toggle filter-criteria-variety-category-name" ng-disabled="disabled">
{{topLevelCategory.text}}

棘手的部分是不具有下拉关闭，当你徘徊在中心的按钮上下拉

The tricky part is not having the dropdown close when you hover down from the centered button onto the dropdown

我搞清楚，如果鼠标从下离开的时候，不应该关闭下拉菜单中，或者其他，这应该从最后一个位置，这是计算在中心的按钮指令链接功能这样做>

I did this by figuring out if the mouse was leaving from "down", which should not close the dropdown, or other, which should from the last position, which was calculated In the centered button directive link function:

link: function (scope, element) {
        init();
        scopeLevelFunctions();
        function init(){
             calculateBoundry();
        }
        function scopeLevelFunctions(){
            scope.calculateElementBoundry = function(){
                calculateBoundry();
            }
        }
        function calculateBoundry(){
            var boundry =  element[0].getBoundingClientRect();
            scope.boundry = boundry;
            scope.topBoundry = boundry.top;
            scope.bottomBoundry = boundry.bottom;
            scope.leftBoundry = boundry.left;
            scope.rightBoundry = boundry.right;
        }

    },

由触发的mouseenter开放的功能设置疆，其中接近从该值计算，看看这是离开下来鼠标离开

The open function triggered by mouseenter sets the boundry, which the close calculates from that value to see if this is a mouseleave that is leaving down

$scope.open = function(){
$scope.calculateElementBoundry();
$scope.currentCategoryId = $scope.topLevelCategory.categoryId;
$scope.filterCriteriaCategoryActive = true;
$scope.timeoutPromise = $timeout(function() {
    $scope.isOpen = true;
}, 150);

};

$scope.close = function($event){
$scope.lastPosition = {
    x : $event.clientX,
    y : $event.clientY
};
var deltaX = $scope.lastPosition.x - $event.clientX,
    deltaY = $scope.lastPosition.y - $event.clientY;
if($event.clientY >= ($scope.bottomBoundry - 8))
    $scope.direction = "bottom";
else
    $scope.direction = "other";
if($scope.direction != "bottom"){
    if($scope.timeoutPromise != undefined)
        $timeout.cancel(this.timeoutPromise);
    $scope.isOpen = false;
    $scope.filterCriteriaCategoryActive = false;
}
else{
    if($scope.isOpen == false && $scope.timeoutPromise != undefined){
        $timeout.cancel(this.timeoutPromise);
        $scope.filterCriteriaCategoryActive = false;
    }
}

我把超时在那里，这样，如果用户刚刚滚动到下拉不只是出现在屏幕的底部。我取消超时如果鼠标离开和下拉不开。

I put the timeout in there so that if the user is just scrolling to bottom of the screen the drop down does not just appear. I cancel the timeout if they mouseleave and the drop down is not open.

在下拉列表中它得到不同的数据，因为该中心的类别指令有与该下拉位于指令共享属性的categoryId。作为这一类标识符是已更改的指令决定了新的类别的子应该和提要，进入下拉菜单。

The dropdown gets different data in it because the centered category directive has an attribute "categoryId" that is shared with the directive that the dropdown is located in. As that categoryId is changed that directive determines what that new categories submenu should be and feeds that into the dropdown.

我知道下拉应该有多宽是因为在包含下拉/隐形按钮我计算的窗口宽度的指令：

I know how wide the dropdown should be because in the directive that contains the dropdown/invisible button I calculated the window width:

var width = $window.innerWidth;
            $scope.windowWidth = "{'min-width':" + width + "}";

和上下拉我用吴式设置这个宽度

and on the dropdown I use ng-style to set this width

ng-style="{{windowWidth}}"

这篇关于需要angularJS下拉宽度，以填补整个画面由远到左边最右边。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！