ng click à l'intérieur de l'élément li <a> ne fonctionne pas à l'intérieur de ng-repeat

Question

Dans mon code html, j'ai quelque chose comme ceci :

   <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>

Maintenant, dans mon composant, j'enregistre simplement la même chose dans la console :

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

Mais il s'agit simplement d'une redirection vers localhost:8000/# mais n'enregistre rien dans la console.

MISE À JOUR Si je supprime href="#" bien qu'il ne redirige pas, il n'enregistre pas non plus les données.

Qu'est-ce que je fais de travers ?

Answer 1

Retirer href="#" des balises d'ancrage, qui redirige vers /# l'itinéraire. Je suppose que vous n'avez pas configuré .otherwise c'est pourquoi vous ne voyez aucun changement dans l'interface utilisateur.

Vous pouvez le faire en tant que href="" qui n'effectuera aucune redirection.

Et puis removeAccount doit avoir controllerAlias avant qu'il ne soit

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