Question

在angular.js中，我有一个提供下拉菜单的按钮。我遇到的问题是，始终如一，我必须单击按钮两次以显示下拉菜单。我第一次点击按钮，我看到它亮起来...所以点击注册。但是，我必须再次点击它以显示下拉菜单。造成这种情况的原因是什么？

指令：

angular.module('main.vips')
.directive('actionButton', ['ActionButtonService', function(ActionButtonService) {
    openAddVipModal = function() {
        return $modal.open({
            templateUrl: 'vips/addvip.html',
            controller: 'AddVipCtrl',
            size: 'lg',
            windowClass: 'modal-fullscreen vip-modal'
        });
    }

  return {
    templateUrl: 'vips/directives/actionButton.html',
    restrict: "AE",
    replace: true,
    transclude: false,
    scope: {
      'label': "@?",
      'icon': "@?",
      'type': "@?",
      'actions': "=?"
    },
    link: function(scope, element, attrs) {
        scope.actions = ActionButtonService[attrs.type];
    }
  }
}]);

服务：

angular.module('main.vips')
.factory('ActionButtonService', function() {
  var actions = {};
  actions.loadbalancer = [
    {
      label: "Create New VIP",
      fn: function() {
        return openAddVipModal();
      },
      icon: "glyphicon glyphicon-plus"
    }, {
      label: "Add Existing VIP",
      icon: "glyphicon glyphicon-search"
    }, {
      divider: true
    }, {
      label: "Activate Selected",
      icon: "glyphicon glyphicon-play"
    }, {
      label: "Suspend Selected",
      icon: "glyphicon glyphicon-pause"
    }, {
      divider: true
    }
  ];
  actions.vip = [
    {
      label: "Create New Node",
      icon: "glyphicon glyphicon-plus"
    }, {
      label: "Add Existing Node",
      icon: "glyphicon glyphicon-search"
    }
  ];
  actions.node = [
    {
      label: "Edit Node",
      icon: "glyphicon glyphicon-plus"
    }, {
      label: "Node Stuff",
      icon: "glyphicon glyphicon-search"
    }, {
      divider: true
    } 
  ];

  return actions;

});

模板：

<div class="btn-group action-button-icon" dropdown>
  <button type="button" class="btn dropdown-toggle"
          ng-class="{'btn-primary page-button': type == 'page',
          'btn-primary btn-xs': type == 'vip',
          'btn-info btn-xs': type == 'node'}"
          id="vip-actions"
          data-toggle="dropdown">
    <span class="{{ icon }}"></span> {{ label }}
  </button>
  <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="vip-actions">
    <li role="presentation" ng-repeat="action in actions" ng-class="{'divider' : action.hasOwnProperty('divider')}">
      <a ng-if="action.hasOwnProperty('label')" role="menuitem" tabindex="-1" 
         >
        <span class="{{ action.icon }}"></span>
        {{ action.label }}
      </a>
    </li>
  </ul>
</div>

HTML：

  <div action-button type="loadbalancer" label="Actions" icon="glyphicon glyphicon-cog" actions="actions.loadbalancer" class="pull-right"></div>

Answer 1

您是否正在使用Angular-UI并在项目中包含Bootstrap JS文件？我们有同样的事情发生，发现如果你在项目中包含Bootstrap JS文件，它会以某种方式介绍它。我们通过从项目中删除Bootstrap JS文件并让Angular-UI处理事情来解决它。

Angular.js奇怪行为 - 必须单击两次按钮才能进入下拉菜单

1 个答案: