如何获得"这个“;背景图像's的url使用“$event.target”;以离子模态显示

How to get "this" background image's url using "$event.target" to show in ionic modal

本文关键字：target event 显示 使用 模态 这个 quot 何获得 背景 图像 url      更新时间：2023-09-26

如何在模式中显示点击的图像

视图：

<a ng-click="openModal($event)" ng-style="{'background-image': 'url(assets/img/img-01.jpg)'}"><img src="assets/alpha-4x3.png"></a>
<a ng-click="openModal($event)" ng-style="{'background-image': 'url(assets/img/img-02.jpg)'}"><img src="assets/alpha-4x3.png"></a>

在控制器中：

 $scope.openModal = function($event) {
   $scope.modal.show();
   $scope.poppedUpImg = $event.target.style.backgroundImage;
 };

模式内模板：

<ion-content class="p20">
  <img ng-src="{{poppedUpImg}}" src="" alt="">
</ion-content>

图像无法使上述代码正常工作。或者请建议一个更好的方法。阿尔法图像正在获取我的点击量。

编辑/更新

@如果主播持有文本内容，Sphinxxx回答有效，如果主播内部有图像，则他的回答无效。以下是我为使事情顺利进行所做的工作。

$event.srcElement.parentElement.style.backgroundImage.split('("')[1].split('")'‌​)[0]

未测试，但我猜$event.target.style.backgroundImage就是"url(assets/img/...)"。为了制作一个合适的图像src，您需要提取括号之间的url：

$scope.poppedUpImg = $event.target.style.backgroundImage
                                        .split('("')[1]
                                        .split('")')[0];

编辑：

如果单击的<a>包含子元素，则$event.target将是单击的子元素。要始终访问<a>元素，请改用$event.currentTarget（Angular ng-click$event将子元素作为目标传递）。

示例（单击"包含"的小拇指或较大的背景）：
http://jsfiddle.net/U3pVM/26551/

相关文章：