読者です 読者をやめる 読者になる 読者になる

Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

AngularJS1.x その0007 a要素をクリックしたときに遷移させないようにする

制作 javascript angularjs

参考にさせていただいたページ

AngularJS ng-click で preventDefault したい - Blogaomu

ng-app.jsの記述内容

例として以下の通り。

// myAppモジュールを作成
var app = angular.module('myApp', []);
// myAppモジュールにSampleCtrlコントローラーを登録
app.controller('SampleCtrl', function($scope) {
  // onclickメソッドを定義
  $scope.onclick = function($event) {
    $event.preventDefault();
  };
});

index.htmlの記述内容

例として以下の通り。

<div ng-controller="SampleCtrl">
  <a href="https://www.google.co.jp/" ng-click="onclick($event)">google</a>
</div>

このソースコードについて

a要素にng-click属性を付けて、$event.preventDefault();と記述することで、a要素によるページ遷移をキャンセルしている。