Question

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

主要问题是当我点击辅助按钮时，也会触发列表项可点击事件。在doc中，它们显示了一个与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点击mdListItem和辅助按钮

1 个答案: