Zapobiegaj domyślnemu zachowaniu kotwicy AngularJS

Question

Gdy użytkownik kliknie łącze, chcę wykonać kod w funkcji wewnątrz kontrolera. Ale chcę zapobiec zmianie adresu URL.

Próbowałem następujące możliwości

1. usunął href atrybutu. nie działa, ciągle zmienia link do '/'

2. Próbowaliśmy ng-click='deleteUser(user.id, $event)' i $event.preventDefault() w moim deleteUser() - funkcja. Nie działa.

3. Co działa hack, który znalazłem na GitHub o unintended reload.

ten sposób zrobić to teraz:

<a ng-click="deleteUser(user.id)" href="javascript:">Delete user</a> 

Pytanie

Co jest the'clean”metoda, aby zapobiec link zmianę adresu URL?

Answer 1

Prawdziwy problem leży w a directive

To prawda, każdy <a></a> elementem jest rzeczywiście angularjs dyrektywa.

Wygląda na to, że rozwiązuje pewne problemy z IE, jeśli spojrzysz na komentarze w kodzie.

Ale wszystko dla mnie działa doskonale, gdy właśnie usunąłem dyrektywę z kodu podstawowego AngularJS.

Miałem ten sam problem co Ty i wypróbowałem wszystkie inne rozwiązania. Różnica polega na tym, że miałem problem tylko w IE.

Jeśli nie chcesz grać przy tworzeniu skryptu AngularJS ze źródła, po prostu wyszukaj htmlAnchorDirective w pliku angular.js i usuń/skomentuj to.

Uważam, że jest tutaj większy problem, którym należy się zająć w rdzeniu AngularJS, ale jeszcze go nie znalazłem.

UPDATE: To rozwiązanie jest prawdopodobnie nieaktualne już teraz! Powinieneś spróbować użyć najnowszej wersji AngularJS.

Answer 2

Zawsze robiłem deleteUser ($ event, user.id) i wyglądało na to, że działa. Możliwym problemem byłoby uporządkowanie zmiennych do obsługi kliknięcia. Pierwszym argumentem powinien być prawdopodobnie obiekt zdarzenia $.

Answer 3

To prawda hack, ale zrobiłem:

<span class="link" ng-click="deleteUser(user.id)">Delete user</span> 

iw moim css miał

span.link { 
    /* style like a link */ 
} 

Answer 4

Co dokładnie nie działa, gdy usunięto atrybut href? To jest dokładnie to, co powinieneś zrobić. Zobacz ten skrzypce na przykład: http://jsfiddle.net/terebentina/SXcQN/

Answer 5

<a ng-click="deleteUser(user.id)" href="">Delete user</a> 

Answer 6

Używam mojej dyrektywy użytkownika, aby to osiągnąć. Jego mechanizmem jest obsługa samej dyrektywy ng-click.

angular.module('delete', []) 
.directive('buttonDelete', ['$parse', function ($parse) { 
    var confirmFunc = function (scope, element, attr, event, ngClick) { 
     if (! confirm("Are you sure?")) { 
      event.preventDefault(); 
     } 
     else { 
      // Copy from ngEventDirectives initialization. 
      var fn = $parse(ngClick); 
      scope.$apply(function() { 
       fn(scope, {$event:event}); 
      }); 
     } 
    }; 

    return { 
     restrict: 'C', 
     compile: function (element, attr) { 
      var ngClick = attr.ngClick; 
      attr.ngClick = ''; 

      return { 
       pre: function (scope, element, attr) { 
        element.click(function (e) { 
         confirmFunc(scope, element, attr, e, ngClick); 
        }); 
       } 
      }; 
     } 
    }; 
}]); 

Answer 7

Poniższa pracował wielki dla mnie:

<a ng-href="javascript: return false;" ng-click="alertSearchCtrl.deleteAlert()">Remove</a> 

Answer 8

Jeśli spojrzeć na source code do dyrektywy a element (który jest częścią kątowego rdzenia), stwierdza się na linii 29 - 31 :

if (!element.attr(href)) { 
    event.preventDefault(); 
} 

Co oznacza, że ​​Angular już rozwiązuje problem linków bez href. Jedynym problemem, który wciąż masz, jest problem z css. Nadal można zastosować styl wskaźnika do kotwic, które NG-kliknięć, np .:

a[ng-click] { 
    /* Styles for anchors without href but WITH ng-click */ 
    cursor: pointer; 
} 

Tak, można nawet zrobić własną stronę bardziej dostępne poprzez zaznaczenie rzeczywistych powiązań z subtelnym, różnej stylizacji następnie linki, które wykonują funkcje.

Szczęśliwe kodowanie!

Answer 9

Jak @Justus wskazał, jeśli kod źródłowy jest tak:

if (!element.attr(href)) { 
    event.preventDefault(); 
} 

Making element.attr(href) jak łańcuchem pustym'' powinno cię wewnątrz warunku if, jak !'' ocenia się true. To jest rozwiązanie @umur