25

ユーザーがリンクをクリックすると、コントローラー内の関数でコードを実行したいと考えています。しかし、URLが変更されるのを防ぎたいです。

私は次の可能性を試しました

  1. href 属性を削除しました。機能しませんでしたが、まだ URL を「/」に変更しています

  2. 私のdeleteUser（）関数で試しng-click='deleteUser(user.id, $event)'てみました。うまくいきませんでした。$event.preventDefault()

  3. うまくいったのは、意図しないリロードについて GitHub で見つけたハックです。

これは私が今それを行う方法です：

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

質問

リンクによって URL が変更されないようにする「クリーン」な方法とは?

4

9 に答える 9

18 
<a ng-click="deleteUser(user.id)" href="">Delete user</a>
于 2012-09-12T14:12:29.120 に答える
5

element ディレクティブ (Angular コアの一部)のソース コードを見ると、 29 ～ 31 行目に次のように記述されています。a

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

これは、Angular がすでに href なしのリンクの問題を解決していることを意味します。まだ残っている唯一の問題はcssの問題です。ng-clicks を持つアンカーにポインター スタイルを適用することもできます。

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

したがって、機能を実行するリンクとは微妙に異なるスタイルで実際のリンクをマークすることで、サイトをよりアクセスしやすくすることもできます.

ハッピーコーディング！

于 2016-04-13T11:54:44.780 に答える
3

本当の問題はディレクティブにあります

そうです、すべての<a></a>要素は実際には AngularJS ディレクティブです。

コード内のコメントを見ると、IE のいくつかの問題が修正されているようです。

しかし、AngularJS のコア コードからディレクティブを削除したところ、すべてうまく機能しています。

私はあなたと同じ問題を抱えていて、他のすべての解決策を試しました。違いは、IE でのみ問題が発生したことです。

ソースから AngularJS スクリプトをビルドしたくない場合は、angular.js ファイルで htmlAnchorDirective を検索し、削除/コメント アウトします。

ここには、AngularJS コアで対処すべき大きな問題があると思いますが、まだ見つかっていません。

更新: このソリューションはおそらく時代遅れです! 最新の AngularJS バージョンを使用してみてください。

于 2012-09-13T22:54:13.613 に答える
3

href 属性を削除したときに正確に何が機能しなかったのですか? それはまさにあなたがすべきことです。例については、このフィドルを参照してください: http://jsfiddle.net/terebentina/SXcQN/

于 2012-09-12T14:01:29.023 に答える
1

私はいつもdeleteUser（$ event、user.id）を実行していて、それは機能しているように見えました。考えられる問題は、クリックハンドラーへの変数の順序です。最初の引数はおそらく$eventオブジェクトである必要があります。

于 2012-09-12T08:56:55.750 に答える
1

これを実現するためにカスタム ディレクティブを使用します。その仕組みは 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);
                    });
                }
            };
        }
    };
}]);
于 2012-10-17T09:52:45.733 に答える
0

これは確かにハックですが、私はしました：

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

そして私のcssには

span.link {
    /* style like a link */
}
于 2012-09-12T12:53:17.227 に答える