md-list-item中的角度锚链接带有附加复选框 - 防止默认操作

Question

我正在尝试在<a>内的<p>标记内插入<md-list-item>个链接。看起来很简单，但问题出现时，我想阻止复选，点击链接时也会放在此列表项中。

代码：

  <md-list>
        <md-list-item ng-class="md-2-line">
            <div class="md-list-item-text">
                <p>I agree <a href="www.termsandconditions.com">Terms & Conditions</a></p>
            </div>
            <md-checkbox class="md-secondary"></md-checkbox>
        </md-list-item>
        ... other options ...
    </md-list>

我试过了：

....... HTML.......
<a ng-click="vm.openLink('someurl')">Terms & Conditions</a>

....... JS.......
function openLink(url, $event) {
        $window.open(url, '_blank');
        $event.stopImmediatePropagation();
    }

以及：

• $ event.preventDefault
• $ event.stopPropagation
• $ event.stopImmediatePropagation
• return false

所有这些都以打开链接结束，但同时复选框已切换

如何在单击md-list中的链接时阻止选中复选框？

Answer 1

我希望这会对你有所帮助：

解决方法是：使用ng-repeat属性将md-checkbox包装在div元素中：

<div ng-repeat="v in [0]">
   <md-checkbox aria-label="" ng-model=""></md-checkbox>
</div>

点击事件将停止冒泡。

Github discussion about this