Question

我正在学习Angular JS。

我有我的angularjs组件，其HTML模板包含Bootstrap的Dropdown组件以及消息<div>：

<div class="dropdown-container">

<div id="messageDiv"></div>

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
  </ul>
</div>

</div>

直接来自Bootstrap：http://getbootstrap.com/components/#dropdowns

我希望我的#messageDiv有文字＆＃34;下拉列表已打开＆＃34; 当下拉列表打开且＆＃34;下拉列表已关闭＆＃34 ; 当下拉列表关闭时。我怎样才能实现这个＆＃34; Angular方式＆＃34;？

Answer 1

我强烈建议您不要重新发明轮子并使用Angular UI Bootstrap。在那里你可以找到dropdown指令。然后，您可以使用isOpen属性绑定管理下拉指令的状态，并根据该属性显示/隐藏#messageDiv。

Answer 2

您可以跟踪下拉列表是否随事件一起打开和关闭。 Bootstrap提供了一个需要包含的javascript文件，它还需要jquery。我在这里做了一个工作的Plunker：https://plnkr.co/edit/pE7bMI?p=preview

一旦你包含了jquery和bootstrap的js文件，你就可以跟踪这样的事件：

$scope.dropdownOpen = false;
// get a reference to your dropdown parent (in your case the <div class="dropdown>" line)
var dropdown = angular.element('#myDropdown');

dropdown.on('show.bs.dropdown', function(event) {
    $scope.dropdownOpen = true;
    $scope.$evalAsync();
});

dropdown.on('hide.bs.dropdown', function(event) {
    $scope.dropdownOpen = false;
    $scope.$evalAsync();
});

为什么$scope.evalAsync()在那里？

由于angular.element是jqlite或jquery的别名，因此我们实际上是在angular之外绑定。它不知道变化，所以我们需要告诉范围发生了变化。

在Angularjs中跟踪bootstrap的组件状态

2 个答案: