Javascript 在md上显示图像/背景在AngularJS 1.6中悬停时选择/md选项

我试图将鼠标悬停在AngularJS material

md select

下拉列表中，在“鼠标悬停”中，它在

div

/

span

中显示其旁边的图像。我正在发布以下代码，但它仍然不会出现：

<md-select id="{{mapping.id}}" ng-model="mapping.value">
  <md-option ng-value="option" 
             ng-mouseenter="show = true" 
             ng-mouseleave="show = false" 
             ng-repeat="map in mapping.values" 
             ng-selected="$first">{{maping.options[$index]}}</md-option>
  <span ng-show="show">
      <img src="{{mapping.image[$index]}}" 
           align-"right" width="60px" 
           height="40px" 
           vertical-align="top"/>
  </span>
</md-select>

---

我们能让手表停下来吗？要实现下面这样的功能，

您可以通过编写自己的

指令来实现，就像我为您所做的那样。请检查此

视图：
应用程序：
var myApp=angular.module（'sandbox'，['ngMaterial']）；
myApp.controller（'myCtrl'，函数（$scope）{
$scope.mapping={
值：null，
价值：[{
名称：“1”，
图像：“http://placehold.it/100x100"
}, {
名称：“2”，
图像：“http://placehold.it/100x100"
}, {
名称：“3”，
图像：“http://placehold.it/100x100"
},
]
}
});
指令（'containerImage'，函数（$compile）{
返回{
限制：“A”，
范围：{
图像：“=”
},
链接：函数（范围、元素、属性）{
元素.on（'mouseover'，函数（e）{
if（element.find（“img”）.length==0）{
var imageElement=角度元素（“”）；
元素。追加（imageElement）；
$compile（imageElement）（范围）；
}否则{
元素find（“img”）.attr（'style'，'display:block'）；
}
});
元素上（'click'，函数（e）{
元素find（“img”）.attr（'style'，'display:none'）；
});
元素.on（'mouseleave'，函数（e）{
元素find（“img”）.attr（'style'，'display:none'）；
});
}
}
});
谢谢您的帮助，但当我将鼠标悬停在选项上时，我正在尝试创建一个图像，在选项旁边是一个小的100 x 100，而不是在选择它之后，如何在选项上使用ng moverenter，我尝试了ng mouseover，但没有luck@Ven请准确地写下你想要实现的目标。您在问题
悬停在md选择下拉列表中说，在“悬停”中，它会在
旁边显示一幅图像。这就是我的回答带给你的。您不必选择它来显示图像。只需将鼠标悬停在
md select
上，图像将显示在
md select
旁边。请准确地写下你想要实现的目标。如果我把你弄糊涂了，很抱歉，我正在寻找下面的内容，@Ven请查看我的更新。我花了大约一个小时的时间和md-*的狗屎做斗争。AngularJS材料不太好。完全同意@linany反馈ven？
scope.shopw = false;

<div ng-app="sandbox" ng-controller="myCtrl">
  <div layout-gt-sm="row" layout="column" layout-margin>
    <main flex-md="60" flex-order-gt-sm="2">
      <h1 class="md-title">
        Main Content
      </h1>
      <div layout="row" layout-xs="column">
        <div flex="60">
          <md-select ng-model="mapping.value">
            <md-option ng-value="map.name"
                       ng-repeat="map in mapping.values" 
                       ng-selected="$first"
                       container-image
                       class="image-container"
                       image="map.image">{{map.name}}</md-option>
          </md-select>
        </div>
      </div>
    </main>
  </div>
</div>

._md {
  overflow: visible;
}

.preview-image {
  position: absolute;
  height:100px;
  width:100px;
  right: -140px;
}

var myApp = angular.module('sandbox', ['ngMaterial']);

myApp.controller('myCtrl', function($scope) {
  $scope.mapping = {
    value: null,
    values: [ {
        name: "1",
        image: "http://placehold.it/100x100"
      }, {
        name: "2",
        image: "http://placehold.it/100x100"
      }, {
        name: "3",
        image: "http://placehold.it/100x100"
      },
    ]
  }
});

myApp.directive('containerImage', function($compile) {
  return {
    restrict: 'A',
    scope: {
      image: "="
    },
    link: function (scope, element, attrs) {

      element.on('mouseover', function (e) {
        if (element.find("img").length === 0) {
          var imageElement = angular.element('<img class="preview-image" src="'+ scope.image +'" height="100" width="100" />');
          element.append(imageElement);
          $compile(imageElement)(scope);
        } else {
          element.find("img").attr('style', 'display:block');
        }
      });

      element.on('click', function (e) {
          element.find("img").attr('style', 'display:none');
      });

      element.on('mouseleave', function (e) {
          element.find("img").attr('style', 'display:none');
      });
    }
  }
});