[解決済み] Angularjs:「構文としてのコントローラ」と$watch
2022-04-27 01:23:47
質問
を使用している場合、プロパティの変更時にサブスクライブするにはどうすればよいですか?
controller as
の構文は?
controller('TestCtrl', function ($scope) {
this.name = 'Max';
this.changeName = function () {
this.name = new Date();
}
// not working
$scope.$watch("name",function(value){
console.log(value)
});
});
<div ng-controller="TestCtrl as test">
<input type="text" ng-model="test.name" />
<a ng-click="test.changeName()" href="#">Change Name</a>
</div>
解決方法は?
関連するコンテキストをバインドするだけです。
$scope.$watch(angular.bind(this, function () {
return this.name;
}), function (newVal) {
console.log('Name changed to ' + newVal);
});
例 http://jsbin.com/yinadoce/1/edit
UPDATE
Bogdan Gersakの回答は、実は同等で、どちらの回答もバインディングを試しています
this
を正しい文脈で表示します。しかし、私は彼の答えの方がすっきりしていると思いました。
とはいえ、まず第一に理解しなければならないのは その背後にある基本的な考え方 .
UPDATE 2:
ES6をお使いの方は
arrow function
を使うと、正しいコンテキストを持つ関数をOOTBで取得できます。
$scope.$watch(() => this.name, function (newVal) {
console.log('Name changed to ' + newVal);
});
関連
-
[解決済み】JavaScript TypeError: null のプロパティ 'style' を読み取ることができない
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] AngularJSで$scope.$watchと$scope.$applyを使用するにはどうすればよいですか?
-
[解決済み] AngularJS コントローラにおける 'this' と $scope の比較
-
[解決済み] AngularJSのコントローラからビューにHTMLを挿入する
-
[解決済み] コントローラでフィルタを使用するには?
-
[解決済み】AngularJSのディレクティブスコープにおける「@」と「=」の違いは何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
vue3.0プロジェクトのアーキテクチャを構築するための便利なツール
-
vueのプロジェクトでモックを使用する方法を知っていますか?
-
Vueの一般的な組み込みディレクティブの説明
-
[解決済み] テスト
-
[解決済み】GETできない / Nodejsエラー
-
[解決済み】JavaScript TypeError: null のプロパティ 'style' を読み取ることができない
-
[解決済み】React-Redux: アクションはプレーンオブジェクトでなければならない。非同期アクションにはカスタムミドルウェアを使用する
-
JavaScriptのStringに関する共通メソッド
-
JavaScriptのgetElementById、getElementsByTagNam、getElementsByClassNameの違いと使い方