[angularjs]ngClick mdListItem 和辅助按钮

发布时间: 2017/4/16 3:37:34
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我在我的项目中使用角材料 (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>

导航功能不是一个对话框。 你知道如何可以修复这吗?

解决方法 1:

我不知道是否我理解正确,但你应该停止从其父冒泡事件的传播 (在本例中从 md-buttonmd-list-item )

检查更多的文档在这里jQuery event.stopPropagation() 方法

那么,你

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()"
赞助商