問題タブ [angularjs-scope]

アプリで ui.bootstrap.dialog が機能しないため、AlertFactory を作成しています。

だから私は次のコードを入力します: http://jsfiddle.net/Premier/BHqKB/17/

[ダイアログを開く] ボタンをクリックすると、非常にうまく機能します。画面上に私のメッセージを含むダイアログが表示されます。

また、keydown でリスナーを登録します。リスナーは、スコープ関連関数が登録されているブロードキャスト イベントを発生させます。この関数は openDialog を呼び出してダイアログを表示します。このように、角度は引数を補間せず、アラートは {{title}} プレースホルダーで表示されます。

私のコードで何が間違っていますか?

ありがとうございました。

jQueryプラグインをラップするディレクティブを作成し、プラグインの構成オブジェクトをコントローラーからディレクティブに渡します。（作品）

構成オブジェクトには、イベントで呼び出したいコールバックがあります。（作品）

コールバックで、コントローラーの$scopeのプロパティを変更したいのですが機能しません。Angularは、何らかの理由でプロパティが変更されたことを認識しません。そのため、コールバックの$scopeはコントローラーの$scopeとは異なると思います。私の問題は、理由がわからないことです。

誰かが私を正しい方向に向けることができますか？

フィドルはこちら

app.js

html

これは問題を説明するための簡略化されたプランクです

視覚化する前にいくつかのhtmlコードをコンパイルするAngularディレクティブを取得しました。htmlには、次の場合にのみ表示される非表示の入力がありscope.isEditShownますtrue。

<input ng-show='isEditShown' type='text' value='{{content.name}}' class='title_edit'/>

scope.titleChange関数が呼び出されると、入力が表示されます。この関数（ng-dblclickディレクティブにバインドされている）は、trueを設定し、入力要素（以前はリンカー関数のスコープに次のように格納されていた）でscope.isEditShownjQueryのメソッドを呼び出そうとします。focus()scope.input = $("input:text", ae);

つまり、何かをダブルクリックしたときに以前に隠されていた入力を視覚化し、すぐにフォーカスを与えたいのです。入力がフォーカスを失うと非表示になるため、即時フォーカスが必要です（ユーザーが入力コンテンツをすぐに編集できるようにしたい。ユーザーがクリックすると入力が非表示になります）。

問題は、プログラムで入力要素に焦点を当てることができないように見えることです。実験した後、scope.isEditShown = true;実行されたとき、入力はまだ表示されておらず（= angle jsはDOMに表示されません）、scope.input.focus();非表示の入力にフォーカスを設定しても何も起こりません。入力要素が最終的に表示されるとき、それは焦点が合っていません。

私がやりたいことをするための角度のある方法は何ですか？入力が表示されていることを確認できるのはいつですか。またfocus()、効果的に呼び出すことができるのはいつですか。注：scope.$apply()入力にフォーカスを与える前に使用すると、$apply already in progress例外が発生します。安全に応募すると、フーカスは出ません。plunkrを参照してください。

（ps：私は本当に理解したいので、自動的にそれを行うコンパニオンライブラリを使用するつもりはありません）

私はこれを完全に逆に考えているかもしれませんが、3つのネストされたディレクティブを作成しようとしています。それらを呼び出すことができます：screen、component、widget。ウィジェットがコンポーネントでいくつかの動作をトリガーできるようにしたいのですが、これにより画面でいくつかの動作がトリガーされます。それで：

を使用してウィジェットのリンクfnに親コンポーネントを要求できますがrequire: "^component"、コンポーネントコントローラーにその包含画面へのアクセスをさらに許可するにはどうすればよいですか？

必要なのはコンポーネントの内容なので、ウィジェットのボタンをクリックすると「screeny！」と警告されます。

ありがとう。

分離スコープを使用したディレクティブがあり（他の場所でディレクティブを再利用できるようにするため）、このディレクティブを。で使用するとng-repeat、機能しません。

このトピックに関するすべてのドキュメントとStackOverflowの回答を読み、問題を理解しました。私はいつもの落とし穴をすべて避けたと思います。

ng-repeatしたがって、ディレクティブによって作成されたスコープが原因でコードが失敗することを理解しています。私自身のディレクティブは、分離スコープを作成し、親スコープ内のオブジェクトへの双方向のデータバインディングを実行します。私のディレクティブは、このバインドされた変数に新しいオブジェクト値を割り当てます。これは、私のディレクティブが使用されていない場合ng-repeat（親変数が正しく更新されている場合）に完全に機能します。ただし、を使用するng-repeatと、割り当てによってng-repeatスコープ内に新しい変数が作成され、親変数は変更を認識しません。これはすべて、私が読んだ内容に基づいて予想どおりです。

また、特定の要素に複数のディレクティブがある場合、1つのスコープのみが作成されることも読みました。またpriority、各ディレクティブにaを設定して、ディレクティブが適用される順序を定義できます。ディレクティブは優先度で並べ替えられ、コンパイル関数が呼び出されます（ http://docs.angularjs.org/guide/directiveでpriorityという単語を検索してください）。

そのため、優先度を使用して、ディレクティブが最初に実行され、最終的に分離スコープが作成されるようにしたいと考えていましたng-repeat。実行すると、親スコープからプロトタイプを継承するスコープを作成する代わりに、分離スコープを再利用します。ng-repeatドキュメントには、そのディレクティブは優先度レベルで実行されると記載されています1000。1優先度が高いのか低いのかは明確ではありません。ディレクティブで優先度を使用した場合1、違いはなかったので、試してみ2000ました。しかし、それは事態をさらに悪化させます。私の双方向バインディングはになりundefined、私のディレクティブは何も表示しません。

私は自分の問題を示すためにフィドルを作成しました。priorityディレクティブの設定をコメントアウトしました。名前オブジェクトのリストと、名前オブジェクトの名前フィールドと名前フィールドを表示するというディレクティブがありname-rowます。selected表示されている名前をクリックすると、メインスコープに変数を設定してほしい。名前の配列である変数は、双方向のデータバインディングを使用selectedしてディレクティブに渡されます。name-row

メインスコープの関数を呼び出すことでこれを機能させる方法を知っています。selectedまた、別のオブジェクトの内側にあり、外側のオブジェクトにバインドすると、動作することもわかっています。しかし、私は現時点ではそれらの解決策には興味がありません。

代わりに、私が持っている質問は次のとおりです。

• ng-repeat親スコープからプロトタイプ的に継承するスコープを作成せず、代わりにディレクティブの分離スコープを使用させるにはどうすればよいですか？
• 2000ディレクティブの優先度が機能しないのはなぜですか？
• Batarangを使用して、どのタイプのスコープが使用されているかを知ることは可能ですか？

ディレクティブと分離されたスコープで非常に奇妙な現象が発生します。スコープ内の属性は、属性の命名に応じて機能するか機能しません。私が使用する場合

それはうまく動作し、期待どおりです。ただし、使用する場合：

定義された関数が割り当てられることはありません。例は次のようになります。

HTML:

Javascript

コンソールには次のように表示されます。

大文字の使用法に依存する可能性は本当にありますか？これは非常に「予期しない」動作です。

ご協力いただきありがとうございます

シャッキー

カラーピッカーを使ったエディタを作りたいです。

これは単純化されたサンプルです。 http://jsfiddle.net/xcUev/8/

色を角度スコープオブジェクトの属性として扱っています。カラーピッカーで選べるようにしました

しかし、色を選択した後は、スコープとして影響しません。

この入力状態のスコープに意図的に影響を与える方法など、機能させるためのアイデアはありますか。

私を助けてください...

私は基本的に、バックボーンのコレクションで「追加」および「削除」イベントにバインドするのと同等のものを望んでいます。基本的に AngularJS でこれを行う方法はないと思います。私たちが解決した現在の回避策は$watch()、配列を ing しlength、全体を手動で比較/再計算することです。これは本当にクールな子供たちがすることですか？

編集：具体的には、配列の長さを見ると、どの要素が変更されたかを簡単に知ることができないため、手動で「差分」をとる必要があります。

含まれているテンプレート内で行われた変更が指定されたモデルに反映されるように、ngInclude のモデルを指定することは可能ですか。例えば：

私は次のようなモデルを持っています:

そしてテンプレート：

「メンバー」または任意の子のいずれかを ngInclude に渡して、それぞれの名前のプロパティを変更することは可能ですか? ng-model を ng-template に渡そうとしましたが、うまくいきません。意図したモデルでスコープを動的にロードしようとしましたが、モデルが削除された場合、孤立したテンプレートが残ります。以下は、jsfiddle コードです。

http://jsfiddle.net/vaibhavgupta007/p7E5K/

異なるモデルに同じテンプレートを複製するのではなく、テンプレートを再利用したいと考えています。私はこの質問を参照しました：

AngularJSのngIncludeディレクティブにモデルを指定するには?

しかし、ここではモデルは削除されません。

編集

今まで、カスタム ディレクティブを作成する概念を把握していませんでした。しかし、ng-include と組み合わせて新しいディレクティブを作成することは役に立ちますか?