ng 单击 mudListItem 和辅助按钮

Question

我在我的项目中使用 angular-material (1.0.7)，我想创建一个带有辅助按钮的可点击列表（从官方文档复制）。

主要问题是当我点击辅助按钮时，列表项可点击事件也会被触发。在文档中，他们显示了一个带有 targetEvent 的对话框，但这不是我尝试做的。

这是我的代码：

            <md-list-item class="md-2-line" ng-repeat="tag in tagsCtrl.showedTags|orderBy:'title'" ng-click="tagsCtrl.navigate(tag)">
                <ng-md-icon icon="label"></ng-md-icon>
                <div class="md-list-item-text">
                    <h3>{{ tag.title }}</h3>
                    <p>{{ tag.slug }}</p>
                </div>
                <span class="md-secondary" ng-show="tag.onProcess">
                    <md-progress-circular md-mode="indeterminate" md-diameter="24"></md-progress-circular>
                </span>

                <span class="md-secondary" ng-hide="tag.onProcess">
                    <md-button class=" md-icon-button md-hue-3" ng-click="tagsCtrl.editTag(tag, $event)" aria-label="Edit tag">
                        <ng-md-icon icon="create"></ng-md-icon>
                    </md-button>
                    <md-button class=" md-icon-button md-hue-3" ng-click="tagsCtrl.deleteTag(tag)" aria-label="Delete tag">
                        <ng-md-icon icon="delete"></ng-md-icon>
                    </md-button>
                </span>
            </md-list-item>

导航功能不是对话框。你知道我该如何解决这个问题吗？

Answer 1

我不知道我是否理解正确，但你应该阻止事件的传播从冒泡到它的父级（在本例中是从 md-button 到 md-list-item）

在此处查看更多文档 jQuery event.stopPropagation() Method

所以你有:

ng-click="tagsCtrl.editTag(tag, $event)"
ng-click="tagsCtrl.deleteTag(tag)"

您可以将替换为

ng-click="tagsCtrl.editTag(tag, $event) && $event.stopPropagation()"
ng-click="tagsCtrl.deleteTag(tag) && $event.stopPropagation()"

ng 单击 mudListItem 和辅助按钮

ngClick on mdListItem and secondary button

javascript

jquery

angularjs

angular-material