Angular.js奇怪的行为-下拉菜单按钮必须点击两次

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来处理。