我成功完成了此操作,但如果下拉列表关闭不是通过选择元素或再次按下标题列表,则箭头不会消失.

(例如,如果我打开一个列表而不打开另一个列表而不关闭第一个列表,则第一个列表的箭头不会消失)

Jsfiddle – http://jsfiddle.net/rpg2kill/uS4Bs/

码：

var myApp = angular.module('myApp',['ui.bootstrap']);

function MyCtrl($scope) {
    $scope.supportedList= ['Option1','Option2','Option3','Option4'];
    $scope.selectedItem = 'Option1';
}

myApp.directive('dropDown',function () {
    return {
            restrict: 'E',replace: false,scope: {
                supportedList:'=',selectedItem:'='
            },template:
'<div ng-mouseenter="onMouseEntered()" ng-mouseleave="onMouseLeft()">' + 
    '<adata-toggle="dropdown" href="" ng-click="onMouseClicked()" >' +
        '<img ng-src="http://png.findicons.com/files/icons/2222/gloss_basic/16/arrow_down.png">  </img>' + //Arrow down Icon
        '<span>{{selectedItem}}</span>' +
    '</a>' +
    '<ul>' +
        '<li ng-repeat="item in supportedList" ng-click="onSelectedItem(item)">' +
            '{{item}}' +
        '</li>' +
    '</ul>' +
'</div>',link: function(scope,element,attrs) {
                scope.dropDownIconVisibility = "hidden";
                scope.dropDownIconVisibilityLocked = false;

                scope.onSelectedItem = function(item) {
                    scope.dropDownIconVisibilityLocked = false;
                    scope.selectedItem = item ;
                };

                scope.onMouseEntered = function()
                {
                    scope.dropDownIconVisibility = "visible";
                };

                scope.onMouseLeft = function()
                {
                    if (scope.dropDownIconVisibilityLocked)
                        return;
                    scope.dropDownIconVisibility = "hidden";
                };

                scope.onMouseClicked = function()
                {
                    scope.dropDownIconVisibility = "visible";
                    scope.dropDownIconVisibilityLocked = !scope.dropDownIconVisibilityLocked;
                };

            }            
    };
})

代码有点难看.更好的解决方案是在鼠标悬停或列表打开时显示箭头,但我不知道如何将角度绑定到下拉列表的状态.

有没有办法将角度绑定到Twitter bootstrap的下拉事件？
或者有更好的方法来解决这个问题吗？

删除所有鼠标跟踪代码,只添加两个CSS规则和here you go：

a.dropdown-toggle img {
    visibility: hidden;
}
a.dropdown-toggle:hover img {
    visibility: visible;
}

.modal-header .close {
    float: right !important;
    margin-right: -30px !important;
    margin-top: -30px !important;
    background-color: white !important;
    border-radius: 15px !important;
    width: 30px !important;
    height: 30px !important;
    opacity: 1 !important;
}

它在Chrome / IE上运行得相当不错,但有时在Firefox上我会遇到奇怪的行为(附图像).是否还有其他CSS规则供我在Firefox上使用此工作？

我有一个使用url domain.com/companies的网页

这是我在该网页中模式的触发器.

<a href="#modal-add-company"data-toggle="modal"><i></i> New Company</a>

这将成功触发此模态

<div id="modal-add-company"tabindex="-1" role="dialog" aria-hidden="true">

但是,该网址不会更改为domain.com/companies#modal-add-company

url domain.com/companies#modal-add-company也不会在重新加载时触发模态.

如何进行以下操作我需要做什么：

>每当我触发模态并显示模态时,将URL更改为domain.com/companies#modal-add-company,并且
>如果我直接输入url domain.com/companies#modal-add-company,则显示模态

$(document).ready(function(){
   $(window.location.hash).modal('show');
   $('a[data-toggle="modal"]').click(function(){
      window.location.hash = $(this).attr('href');
   });
});

假设您有一个触发器来关闭模态,如下所示：

<button type="button"data-dismiss="modal" aria-hidden="true">&times;</button>

您可以在上面的代码块下面添加：

$('button[data-dismiss="modal"]').click(function(){
     var original = window.location.href.substr(0,window.location.href.indexOf('#'))
     history.replaceState({},document.title,original);
 });

并且假设您希望转义按钮仍然能够关闭模态,并且还更改URL,整个代码块将如下所示：

$(window.location.hash).modal('show');
    $('a[data-toggle="modal"]').click(function(){
        window.location.hash = $(this).attr('href');
    });

    function revertToOriginalURL() {
        var original = window.location.href.substr(0,window.location.href.indexOf('#'))
        history.replaceState({},original);
    }

    $('.modal').on('hidden.bs.modal',function () {
        revertToOriginalURL();
    });

感谢https://stackoverflow.com/a/13201843/80353关于如何使用模态关闭事件.

>当你不知道模态的确切高度时，如何将模态垂直放在中心？
>是否可能有模态中心和溢出：auto在模态体，但只有模态超过屏幕高度吗？

我已经尝试使用这：

.modal-dialog {
  height: 80% !important;
  padding-top:10%;
}

.modal-content {
  height: 100% !important;
  overflow:visible;
}

.modal-body {
  height: 80%;
  overflow: auto;
}

这给了我所需要的结果，当内容远大于垂直屏幕尺寸，但对于小模态内容，它是非常不可用。

.modal {
  text-align: center;
}

@media screen and (min-width: 768px) { 
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

并调整一点点.fade类，以确保它出现在窗口的顶部边框之外，而不是中心