javascript - 不能用 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(C类)。例如:

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

来自 Angular's documentation :

The restrict option is typically set to:

'A' - only matches attribute name

'E' - only matches element name

'C' - only matches class name

Demo