单击图像后如何创建下拉菜单?[引导/角度]

Question

我试着添加了一个下拉类，但我不知道从哪里开始。以下是我想添加下拉菜单的代码片段：

<span
  id="dropdown-info"
  ng-init= "myVar='images/info_icon_off.png'" 
  ng-mouseover="myVar='images/info_icon_on.png'" 
  ng-mouseout="myVar='images/info_icon_off.png'"
  ng-click="doSomething()">
    <img class="info-icon" ng-src="{{myVar}}" alt="Information" width="10" height="10">
</span>

Answer 1

如果您使用的是bootstrap，那就是它了…您可以使用li来动态加载列表。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="dropdown">
<img src="https://c1.iggcdn.com/indiegogo-media-prod-cld/image/upload/c_limit,w_620/v1456219661/avvcx99jxynsu2svk9po.png" class=" dropdown-toggle" data-toggle="dropdown" /> 
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

Answer 2

我建议把你的跨度写进指令中。然后在链接函数中，您可以使用Angular的jqLite在图像下动态添加下拉列表。但是，如果下拉列表的结构可以预先编写，并且只有它的数据是动态的，我建议你用ng if隐藏它，并用变量填充它的选项

<span
  id="dropdown-info"
  ng-init= "myVar='images/info_icon_off.png'" 
  ng-mouseover="myVar='images/info_icon_on.png'" 
  ng-mouseout="myVar='images/info_icon_off.png'"
  ng-click="doSomething()">
    <img class="info-icon" ng-src="{{myVar}}" alt="Information" width="10" height="10">
    <select ng-if="showDropDown" ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
</span>

然后你的JS

var app = angular.module('app', []);
app.controller('TestController', ['$scope',
     function($scope) {
         $scope.showDropDown = false;
         $scope.doSomething = function() {
             $scope.showDropDown = true;
         }
         $scope.items = [{
            id: 1,
            label: 'aLabel',
            subItem: { name: 'aSubItem' }
         }, {
            id: 2,
            label: 'bLabel',
            subItem: { name: 'bSubItem' }
         }];
     }
]);

这是一个没有指令的方法。如果使用多个跨距，则这将不起作用。然后，您需要使用一个指令，并使用scope:{} 应用相同的逻辑

Answer 3

下面是一个工作示例：https://embed.plnkr.co/jACJyC/

注意：如果使用angular6，ClickOutside指令在@NgModule的声明中声明："