Question

我正在尝试将href链接放在离子幻灯片中的滑块图像和文本中。

这是我的代码。

<ion-slide-box ng-show="!cloading">
  <ion-slide ng-repeat="img in simgs">
    <div class="box">
      <a ng-href="#/menu/tab/featured-post/{{post.id}}" style="text-decoration:none;">
        <img src="{{img.url}}" ></img>
        <p class="prodblk2" ng-href="#/menu/tab/featured-post/{{post.id}}" >
          {{img.title}}           
        </p>
       </a>
     </div>
  </ion-slide>
</ion-slide-box>

链接正在显示，但点击它时它无法正常工作。我想，滑动或拖动等离子滑块属性会覆盖鼠标操作我通过添加一些JS函数尝试了ng-href甚至ng-click。

我希望代码没有错。我想，我需要在离子滑动标签上添加一些属性。我搜索了类似的问题，但我还没找到。如果有人知道，请帮助我。提前谢谢。

Answer 1

我最终遇到了与你相同的问题，我的解决方案是使用ng-click on ion-slide指令，因为在那里它会启动。

因此，您可以创建一个方法，将您需要的id作为参数传递，然后在控制器中处理路径。这是我解决问题的方法：

HTML：

<ion-slide-box ng-show="!cloading">
<ion-slide ng-repeat="img in simgs" ng-click="slideClick({{post.id}})">
<div class="box">
  <a style="text-decoration:none;">enter code here
    <img src="{{img.url}}" ></img>
    <p class="prodblk2 >
      {{img.title}}           
    </p>
   </a>
 </div>

然后使用$ location在您的控制器上创建一些方法转到您的网址。

JS：

$scope.slideClick = function(postId) {
    $location.path("/menu/tab/featured-post/" + postId);
}

HREF不适用于离子载玻片

1 个答案: