問題の核心は、AngularJSを非常に伝統的な「jQuery-soupスタイル」のJavaScriptパターンと混合しようとしていることです。Angularでは、DOMの操作とインタラクション(クリックを含む)を行うために常にディレクティブを使用する必要があります。この場合、コードは次のようになります。
<div ng-controller="myModelCtrl">
<div>Number is {{myModel.number}}</div>
<a ng-click="myModel.updateNumber()">Update Number</a>
</div>
function myModelCtrl($scope) {
var myModel = new MyModel();
$scope.myModel = myModel;
}
function MyModel() {
var _this = this;
_this.number = 0;
_this.updateNumber = function() {
_this.number += 1;
alert('new number should display ' + _this.number);
}
return _this;
}
jQueryで手動ハンドラーを設定する代わりに、click
Angularの組み込みng-click
ディレクティブを使用する方法に注目してください。これにより、Angularスコープのライフサイクルに結び付け、ユーザーがリンクをクリックしたときにビューを正しく更新できます。
これがAngularJSFAQからの引用です; 私はあなたが習慣を破るのを助けるかもしれない部分を太字にしました。
一般的な落とし穴
Angularサポートチャネル(Freenodeの#angularjs)には、Angularの新規ユーザーが陥る多くの落とし穴があります。このドキュメントは、難しい方法を見つける前にそれらを指摘することを目的としています。
DOM操作
jQueryを使用してコントローラーのDOMを変更しようとするのをやめます。本当に。これには、要素の追加、要素の削除、コンテンツの取得、表示と非表示が含まれます。組み込みのディレクティブを使用するか、必要に応じて独自のディレクティブを作成して、DOM操作を実行します。機能の複製については、以下を参照してください。
習慣を破るのに苦労している場合は、アプリからjQueryを削除することを検討してください。本当に。Angularには$httpサービスと強力なディレクティブがあり、ほとんどの場合不要です。AngularにバンドルされているjQLiteには、Angularディレクティブの記述、特にイベントへのバインドで最も一般的に使用される機能がいくつかあります。
最後に、この手法を使用して作業する例を次に示します。http: //jsfiddle.net/BinaryMuse/xFULR/1/