javascript - ng 单击 ListItem 和辅助按钮

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 -列表项)

在此处查看更多文档 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()"