2

我正在使用 ui-boostrap 下拉指令，并想添加我自己的 ng-if 以防止在某些情况下显示它。添加此 ng-if 时，即使它始终返回“true” - 下拉列表停止工作（不弹出）。似乎下拉按钮停止接收 ng-click 事件（因此不改变 isOpen 状态..）。

HTML：

    <!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.2.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="DropdownCtrl">


    <!-- Single button -->

    <div class="btn-group" uib-dropdown is-open="status.isopen">

    <!-- When putting this ng-if, the drop down stops working -->
      <div ng-if="isAllowed()">

        <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
          Button dropdown <span class="caret"></span>
        </button>
        <ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
          <li role="menuitem"><a href="#">Action</a></li>
          <li role="menuitem"><a href="#">Another action</a></li>
          <li role="menuitem"><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li role="menuitem"><a href="#">Separated link</a></li>
        </ul>
      </div>
    </div>


    <script type="text/ng-template" id="dropdown.html">
        <ul class="uib-dropdown-menu" role="menu" aria-labelledby="button-template-url">
          <li role="menuitem"><a href="#">Action in Template</a></li>
          <li role="menuitem"><a href="#">Another action in Template</a></li>
          <li role="menuitem"><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li role="menuitem"><a href="#">Separated link in Template</a></li>
        </ul>
    </script>
</div>
  </body>
</html>

JS：

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope, $log) {
  $scope.items = [
    'The first choice!',
    'And another choice for you.',
    'but wait! A third!'
  ];

  $scope.status = {
    isopen: false
  };

  $scope.toggled = function(open) {
    $log.log('Dropdown is now: ', open);
  };

  $scope.toggleDropdown = function($event) {
    $event.preventDefault();
    $event.stopPropagation();
    $scope.status.isopen = !$scope.status.isopen;
    console.log('isOpen = ' + $scope.status.isopen);
  };

  $scope.isAllowed = function() {
    return true;
  }
});

这是一个 plunker 重现问题： http ://plnkr.co/edit/8K9MUsDfFcjyiZvFdv5x?p=preview

有任何想法吗？

4

1 回答 1

1

取出带有 ng-if 的 div 并将 ng-if 放在封闭的 div 上，即

<div class="btn-group" uib-dropdown is-open="status.isopen" ng-if="isAllowed()">

    <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
      Button dropdown <span class="caret"></span>
    </button>
    <ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
      <li role="menuitem"><a href="#">Action</a></li>
      <li role="menuitem"><a href="#">Another action</a></li>
      <li role="menuitem"><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li role="menuitem"><a href="#">Separated link</a></li>
    </ul>
</div>
于 2015-12-09T09:41:17.113 回答