2

私は ui-boosttrap ドロップダウン ディレクティブを使用しており、独自の 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;
  }
});

問題を再現するプランカーは次のとおりです。 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 に答える