[解決済み] angular ディレクティブは、ディレクティブの属性で指定された式で関数に引数を渡すことができますか?
質問
フォームディレクティブで、指定した
callback
属性に、分離されたスコープを設定します。
scope: { callback: '&' }
の中に入っています。
ng-repeat
を含むので、私が渡す式は
id
をコールバック関数の引数として指定します。
<directive ng-repeat = "item in stuff" callback = "callback(item.id)"/>
ディレクティブを書き終えると、それは
$scope.callback()
をコントローラ関数から実行します。ほとんどの場合、これで問題ありませんし、やりたいこともこれだけなのですが、時には
directive
を使用します。
これを可能にするようなangular表現はないでしょうか。
$scope.callback(arg2)
となり、結果として
callback
で呼び出される。
arguments = [item.id, arg2]
?
そうでない場合、最もすっきりした方法は何でしょうか?
これが有効だということがわかりました。
<directive
ng-repeat = "item in stuff"
callback = "callback"
callback-arg="item.id"/>
とともに
scope { callback: '=', callbackArg: '=' }
を呼び出すディレクティブと
$scope.callback.apply(null, [$scope.callbackArg].concat([arg2, arg3]) );
しかし、特にすっきりしたとは思いませんし、isolateスコープに余計なものを入れてしまうことになります。
何か良い方法はないでしょうか?
プランカー・プレイグラウンドはこちら (コンソールを開いておく)。
解決方法は?
lex82 の言うようにコールバックを宣言すると
callback = "callback(item.id, arg2)"
ディレクティブスコープでコールバックメソッドをオブジェクトマップで呼び出せば、正しくバインドされます。のように
scope.callback({arg2:"some value"});
を使用すると、$parse を必要としません。私のfiddle(コンソールログ)を見てください。 http://jsfiddle.net/k7czc/2/
更新情報 : の中に小さな例があります。 ドキュメント :
& または &attr - のコンテキストで式を実行する方法を提供します。 親スコープ attr名を指定しない場合、属性名 はローカル名と同じとみなされる。与えられた、ウィジェットのスコープの定義。{ localFn:'&myAttr' }とすると、スコーププロパティlocalFnが指すのは を表す関数ラッパーです。よくあること 分離されたスコープから式を介してデータを渡すことが望ましいです。 と親スコープに渡すことができます。 変数名と値を式ラッパーのfnに渡します。 例えば 式がincrement(amount)である場合、amountを指定することができます。 の値は、localFn({amount: 22})のようにlocalFnを呼び出すことで得られます。
関連
-
Javascript Bootstrapのグリッドシステム、ナビゲーションバー、ローテーションの説明
-
JavaScriptの配列共通メソッド解説
-
vueが定義するプライベートフィルタと基本的な使い方
-
Vueのクラススタイルの使い方の詳細
-
Vueのフォームイベントのデータバインディングの説明
-
[解決済み】最大呼び出しスタックサイズ超過エラー
-
[解決済み】ローカルファイルを開くことができません - Chrome: ローカルリソースの読み込みが許可されていない
-
[解決済み】awaitは非同期関数でのみ有効です。
-
[解決済み】JavaScript TypeError: null のプロパティ 'style' を読み取ることができない
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
要素ツリー制御によるvueTreeテーブル
-
JSアレイループと効率解析の比較
-
jsを使った簡単な照明スイッチのコード
-
HTML+CSS+JavaScriptで簡単な三目並べゲームを作成する。
-
vueのグローバルがscss(mixin)を導入。
-
[解決済み] Error : 未定義のプロパティ 'map' を読み取ることができません。
-
[解決済み】ExpressJS - throw er Unhandled errorイベント
-
HTML5 LocalStorage ローカルストレージとセッションストレージの使用法
-
OSSアップロードエラーを解決する: net::ERR_SSL_PROTOCOL_ERROR
-
jq は html ページとデータを動的に分割する。