javascript - ng click inside li 元素在 ng-repeat 中不起作用

Question

在我的 html 中我有这样的东西:

   <div class="list-table-wrapper embedded-medium">
                <table class="list-table embedded-list-table">
                    <thead>
                        <tr>
                            <th>
                                <a href="#list-table" class="table-sort table-sort-desc">
                                    <span class="table-sort-text">Account Name</span>
                                    <span class="table-sort-indicator"></span>
                                </a>
                            </th>
                            <th>
                                <a href="#list-table" class="table-sort table-sort-desc">
                                    <span class="table-sort-text">Service Level</span>

                                </a>
                            </th>

                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="item in vm.items | limitTo : vm.pageSize : (vm.currentPage-1)*vm.pageSize">
                            <td class="table-link"><a ng-link="['MigrationStatus']" class="ng-binding" href="migration-status.html">{{item.accountName}}</a></td>
                            <td class="table-text">{{item.serviceLevel}}</td>
                            <td class="table-input">
                                <div class="btn-group">
                                    <div class="dropdown">
                                        <div class="dropdown-toggle" ng-click="batch.showSettings = !batch.showSettings"></div>
                                        <ul class="dropdown-menu visible" ng-show="batch.showSettings">
                                            <li><span class="dropdown-category">Manage</span></li>
                                            <li class=""><a href="#" ng-click="removeAccount(item.accountName)">Remove from Panel</a></li>
                                            <li class=""><a href="#">View in Encore</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </td>
                        </tr>

现在在我的组件中，我只是在控制台记录相同的内容:

            vm.removeAccount = function(accountName){
                console.log(accountName);
            }

但它只是重定向到 localhost:8000/# 但不在控制台中记录任何内容。

更新如果我删除 href="#" 虽然它没有重定向，但它也没有记录数据。

我做错了什么？

Answer 1

从 anchor 标签中删除 href="#"，它重定向到 /# 路由。我猜你还没有配置 .otherwise state/route 这就是你在 UI 上看不到任何变化的原因。

您可以将其设为不执行任何重定向的 href=""。

然后 removeAccount 方法之前应该有 controllerAlias

ng-click="vm.removeAccount(item.accountName)"