Question

当我运行这个plunker时，我按下拉列表的向下箭头，我认为下拉列表现在弹出，但它不会

在我的浏览器控制台中，我没有错误。

为什么不能点击下拉列表？

http://plnkr.co/edit/WHswYfce44W6WWZR1T7y?p=preview

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  var schoolclassCodeColors = [
    {background:'blue'},

    {background:'red'}
    ];

  var newSubject = "test";
  var newSchoolclass = "11";
  var newSchoolclassIdentifier = "xb";

    $scope.activeStep = {};
  $scope.activeStep.schoolclassCodeColors = schoolclassCodeColors;
  $scope.activeStep.schoolclassCodeColorsIsOpen = false;

  $scope.activeStep.selectedSchoolclassCodeColor = $scope.activeStep.schoolclassCodeColors[0];

  $scope.activeStep.schoolclassCode = function () {
       return newSubject + newSchoolclass + newSchoolclassIdentifier;
  };

  $scope.activeStep.setSchoolclassCodeColor = function(color){
    $scope.activeStep.selectedSchoolclassCodeColor = color;
    this.schoolclassCodeColorsIsOpen = false;

 };
});

app
.constant('dropdownConfig', {
  openClass: 'open'
})

.service('dropdownService', ['$document', function($document) {
  var openScope = null;

  this.open = function( dropdownScope ) {
    if ( !openScope ) {
      $document.bind('click', closeDropdown);
      $document.bind('keydown', escapeKeyBind);
    }

    if ( openScope && openScope !== dropdownScope ) {
        openScope.isOpen = false;
    }

    openScope = dropdownScope;
  };

  this.close = function( dropdownScope ) {
    if ( openScope === dropdownScope ) {
      openScope = null;
      $document.unbind('click', closeDropdown);
      $document.unbind('keydown', escapeKeyBind);
    }
  };

  var closeDropdown = function( evt ) {
    // This method may still be called during the same mouse event that
    // unbound this event handler. So check openScope before proceeding.
    if (!openScope) { return; }

    var toggleElement = openScope.getToggleElement();
    if ( evt && toggleElement && toggleElement[0].contains(evt.target) ) {
        return;
    }

    openScope.$apply(function() {
      openScope.isOpen = false;
    });
  };

  var escapeKeyBind = function( evt ) {
    if ( evt.which === 27 ) {
      openScope.focusToggleElement();
      closeDropdown();
    }
  };
}])

.controller('DropdownController', ['$scope', '$attrs', '$parse', 'dropdownConfig', 'dropdownService', '$animate', function($scope, $attrs, $parse, dropdownConfig, dropdownService, $animate) {
  var self = this,
      scope = $scope.$new(), // create a child scope so we are not polluting original one
      openClass = dropdownConfig.openClass,
      getIsOpen,
      setIsOpen = angular.noop,
      toggleInvoker = $attrs.onToggle ? $parse($attrs.onToggle) : angular.noop;

  this.init = function( element ) {
    self.$element = element;

    if ( $attrs.isOpen ) {
      getIsOpen = $parse($attrs.isOpen);
      setIsOpen = getIsOpen.assign;

      $scope.$watch(getIsOpen, function(value) {
        scope.isOpen = !!value;
      });
    }
  };

  this.toggle = function( open ) {
    return scope.isOpen = arguments.length ? !!open : !scope.isOpen;
  };

  // Allow other directives to watch status
  this.isOpen = function() {
    return scope.isOpen;
  };

  scope.getToggleElement = function() {
    return self.toggleElement;
  };

  scope.focusToggleElement = function() {
    if ( self.toggleElement ) {
      self.toggleElement[0].focus();
    }
  };

  scope.$watch('isOpen', function( isOpen, wasOpen ) {
    $animate[isOpen ? 'addClass' : 'removeClass'](self.$element, openClass);

    if ( isOpen ) {
      scope.focusToggleElement();
      dropdownService.open( scope );
    } else {
      dropdownService.close( scope );
    }

    setIsOpen($scope, isOpen);
    if (angular.isDefined(isOpen) && isOpen !== wasOpen) {
      toggleInvoker($scope, { open: !!isOpen });
    }
  });

  $scope.$on('$locationChangeSuccess', function() {
    scope.isOpen = false;
  });

  $scope.$on('$destroy', function() {
    scope.$destroy();
  });
}])

.directive('dropdown', function() {
  return {
    controller: 'DropdownController',
    link: function(scope, element, attrs, dropdownCtrl) {
      dropdownCtrl.init( element );
    }
  };
})

.directive('dropdownToggle', function() {
  return {
    require: '?^dropdown',
    link: function(scope, element, attrs, dropdownCtrl) {
      if ( !dropdownCtrl ) {
        return;
      }

      dropdownCtrl.toggleElement = element;

      var toggleDropdown = function(event) {
        event.preventDefault();

        if ( !element.hasClass('disabled') && !attrs.disabled ) {
          scope.$apply(function() {
            dropdownCtrl.toggle();
          });
        }
      };

      element.bind('click', toggleDropdown);

      // WAI-ARIA
      element.attr({ 'aria-haspopup': true, 'aria-expanded': false });
      scope.$watch(dropdownCtrl.isOpen, function( isOpen ) {
        element.attr('aria-expanded', !!isOpen);
      });

      scope.$on('$destroy', function() {
        element.unbind('click', toggleDropdown);
      });
    }
  };
});

HTML

  </head>

  <body ng-controller="MainCtrl">
    <div class="col-md-6">
      <div class="btn-group" dropdown is-open="activeStep.schoolclassCodeColorsIsOpen">
          <button type="button" ng-style="{{activeStep.selectedSchoolclassCodeColor}}"
                  class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
              {{activeStep.schoolclassCode()}} <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
              <li ng-repeat="color in activeStep.schoolclassCodeColors">
                  <a ng-style="{{color}}"
                     ng-click="activeStep.setSchoolclassCodeColor(color)">{{activeStep.schoolclassCode()}}</a>
              </li>
          </ul>
      </div>
  </div>
  </body>

</html>

Answer 1

要在dropdownToggle属性中使用class指令，您需要定义指令中的restrict权限以包含C（ C 小姑娘）。例如：

.directive('dropdownToggle', function() { return { restrict: 'AEC', require: '?^dropdown', // ... });

来自Angular's documentation：


restrict选项通常设置为：

＆＃39; A＆＃39; - 仅匹配属性名称

＆＃39; E＆＃39; - 仅匹配元素名称

＆＃39; C＆＃39; - 仅匹配班级名称

<强> Demo

Answer 2

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />

<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>
<script src="app.js"></script>

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

您需要添加bootstrap.min.js和jquery.js个javascript文件，还需要将data-toggle="dropdown"属性添加到button，如下所示

 <button type="button" ng-style="{{activeStep.selectedSchoolclassCodeColor}}"
              class="btn btn-primary dropdown-toggle" ng-disabled="disabled" data-toggle="dropdown">

这里是plunker demo

Answer 3

对于您要做的事情，这似乎是一个非常多的代码。我不知道下面的答案是否是你要找的。我假设你正在尝试创建一个仅限角度版本的bootstrap切换。

您似乎误解了指令require和controller属性的工作方式。我认为不幸的是，角度文档可能是这种混乱的根源：

当指令需要控制器时，它接收该控制器作为其链接函数的第四个参数。

它表示该指令需要一个控制器，但实际上该指令需要另一个指令。并且 required指令的控制器被传递给链接函数。

controller属性不应该是字符串（controller: 'DropdownController',），而应该是控制器的构造函数。所以我认为您可以通过将DropdownController移动到指令中来解决您的问题。

对于类似（但更简单）类似的示例，您可以see this answer and the plnkr.

单击按钮无法单击按钮

3 个答案: