AngularJSでフィルタからスコープ変数にアクセスする
2023-12-08 08:08:28
質問
私は
date
の値をこの方法でカスタムフィルタに渡しています。
angular.module('myapp').
filter('filterReceiptsForDate', function () {
return function (input, date) {
var out = _.filter(input, function (item) {
return moment(item.value.created).format('YYYY-MM-DD') == date;
});
return out;
}
});
私はディレクティブでできるように、そこにいくつかのスコープ変数を注入したいと思います。関数の引数として明示的にこれらの変数を渡すことなく、これを行うことは可能でしょうか?
どのように解決するのですか?
どうやらできるようです。
通常、関数のパラメータとしてスコープ変数をフィルタに渡します。
function MyCtrl($scope){
$scope.currentDate = new Date();
$scope.dateFormat = 'short';
}
<span ng-controller="MyCtrl">{{currentDate | date:dateFormat}}</span> // --> 7/11/13 4:57 PM
しかし、現在のスコープを渡すには
this
:
<span ng-controller="MyCtrl">{{currentDate | date:this}}</span>
と
this
は現在のスコープへの参照となります。
簡略化すると
app.controller('AppController',
function($scope) {
$scope.var1 = 'This is some text.';
$scope.var2 = 'And this is appended with custom filter.';
}
);
app.filter('filterReceiptsForDate', function () {
return function (input, scope) {
return input + ' <strong>' + scope.var2 + '</strong>';
};
});
<div ng-bind-html-unsafe="var1 | filterReceiptsForDate:this"></div>
<!-- Results in: "This is some text. <strong>And this is appended with custom filter.</strong>" -->
警告
- フィルタの中の値を読むときだけスコープを使うようにしましょう。そうしないと、簡単に $digest ループに入ってしまいます。
- このような依存関係 (スコープ全体) を必要とするフィルタは、テストが非常に困難になる傾向があります。
関連
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] 関数内でグローバル変数を使用する
-
[解決済み] JavaScriptの変数のスコープとは何ですか?
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] AngularJSで$scope.$watchと$scope.$applyを使用するにはどうすればよいですか?
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
-
[解決済み] AngularJS - ngRepeatフィルタリングされた結果の参照を取得する方法
-
[解決済み] jqueryはjavascriptのライブラリなのかフレームワークなのか?[クローズド]
-
[解決済み] JavaScriptのArray.sort()メソッドでシャッフルするのは正しいのか?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JSのDateからDay名
-
[解決済み] 文字列のn番目の出現箇所を取得するには?
-
[解決済み] React js 親コンポーネントから子コンポーネントの状態を変更する
-
[解決済み] JSXとLoadshを使用して、ある要素をn回繰り返す方法
-
[解決済み] Javascript 空の配列の削減
-
[解決済み] JavaScript のオブジェクトの配列を比較し、最小値/最大値を取得する
-
[解決済み] TypeScriptプロジェクトで既存のC#クラス定義を再利用する方法
-
[解決済み] jQueryで入力ファイルが空かどうかをチェックする方法
-
[解決済み] モデルフェッチ時に1をtrueに、0をfalseに変換する方法
-
[解決済み] Javascriptの.filter()メソッドでコールバック関数に追加パラメータを渡すにはどうすればよいですか?