ng-click 不能点击按钮

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

为了在class 属性中使用dropdownToggle 指令，您需要从指令中定义restrict 权限以包含C（Class）。例如：

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

来自Angular's documentation：

restrict 选项通常设置为：

'A' - 只匹配属性名

'E' - 仅匹配元素名称

'C' - 只匹配类名

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

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

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

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

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

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

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