問題タブ [angular-directive]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
2 に答える
1110 参照

javascript - AngularJS の「親」コントローラーからディレクティブ API メソッドを呼び出す

再利用可能で、状態を変更するためのパブリック API を提供するカスタム コンポーネントを作成したい状況があります。ディレクティブとコントローラーを使用してコンポーネントを構築することで、これを達成しようとしています。

私がやりたいことは単純です:

customComponent.apiMethod1( Math.floor( Math.random() * 2 ) );

これが私のケースを説明するはずのJSFiddleです:http://jsfiddle.net/7d7ad/4/

9 行目 (ユーザーがボタンをクリックしたとき) で、22 行目のメソッド (カスタム コンポーネントのパブリック API メソッド) を呼び出したいと思います。これを達成する方法はありますか?

0 投票する
1 に答える
340 参照

javascript - データ変更時の angularjs および ng-init スコープ

そのため、現在、ユーザーが開始日と終了日を選択し、カレンダーの更新をクリックするカレンダー アプリケーションがあります。これにより、カレンダーが作成されます。ただし、スコープに新しい要素を含めるのに問題があります。たとえば、開始日、週番号、曜日などからセルの「セル日付」を計算するために同じ関数を何度も繰り返し使用する代わりに、セルの日付をそのスコープに一度格納したいそしてみんなに使ってもらいましょう。何度も試みたにもかかわらず、どういうわけか私はこれを行うことができません。以下の JSFiddle では、各カレンダー セルの右上隅に日付が表示されていることがわかります。ただし、日付を変更すると、たとえば 1 か月前に日付が更新されますが、セルに表示されている「セルの日付」は更新されません。

たとえば、「2014 年 7 月 5 日土曜日」とします。日付を 6/1 に開始するように更新します。右端のセルは、その月の日が 6 月 7 日を反映しているにもかかわらず、「2014 年 7 月 5 日土曜日」のままです。関連するコードは「callcell」ディレクティブと「events」ディレクティブにあります。calcell では、celld を ng-init='celld=cellDate(num, start_dt, $index)' として設定しました。次に、イベントで {{celld}} を使用して単純に表示します。イベントで cellDate(num, start_dt, $index) を使用して機能させることができましたが、同じ関数をどこでも何百万回も使用したくありません。セルの日付をセルオブジェクトに保存し、それを子スコープで使用して、データが変更されたときに更新する方法はありますか? 最終的には、セルの日付を関数に渡して、その日付のイベント データを取得します。その後、イベントはそれらを反復処理して、イベント データを表示します。

フィドルリンク

ありがとう!

0 投票する
4 に答える
13753 参照

angularjs - angular-multi-selectを検証するにはどうすればよいですか?

http://isteven.github.io/angular-multi-select/から angular-multi-select を使用しています。それは私の必要に応じて機能します。モーダル形式で複数選択を使用していて、それを検証したいのですが、必要なオプションを使用すると検証されません。angular-multi-select をフォームで検証する方法を誰かに提案してもらえますか。

コード

前もって感謝します

0 投票する
1 に答える
76 参照

javascript - 別の角度ディレクティブの子である場合とそうでない場合がある角度ディレクティブ

最近、Angular を学ぶことにしました。これは優れたフレームワークであり、私はかなり楽しんできましたが、その本当の要点であるディレクティブに行き着きました。CSS の移行以降、おそらく HTML に起こった最高の出来事だと思います。いくつかの場所で奇妙な変更されたタブ形式を使用する Web サイトを構築しました (ページのコンテンツはこれらのタブに読み込まれ、バリエーションが FAQ ページに使用されました)。

<menu>私自身いじり回しているうちに、タグに出くわし、それに対する失望を思い出しました。menu タグを、子要素としてサブメニューを持つアイテムのドロップダウンを使用して、Web サイトの独自のタイプのナビゲーション メニューに変更するディレクティブを作成したいと考えています。例:

「何か」のメニュー項目がマウスオーバーされるまで、メニュー項目タグ内のメニューを非表示にします。<menu> -> <menu-item> -> <menu> -> ...そして、これが実際のナビゲーションメニューに必要な場合の任意の組み合わせに適用できるようにしたいと考えています。

これが私のjavascriptからの進行中の情報です。何かが機能するかどうかを確認するためにいじっていたことを覚えておいてください。

現時点での主な質問は次のとおりです: レベル 0 (別名、子タグなし) の要素について、渡された HTML 値を収集し、子タグ<menu>を持つアイテムに渡される menu-title 属性に設定するにはどうすればよいですか? <menu>?

どんな助けでも大歓迎です。答えがトランスクルード機能に関係していることは知っていますが、使い方がわかりません。以前に $transclude をメニュー項目コントローラーに$scope.menuTitle渡しましたが、渡された関数内でプロパティを設定しても何も変わりませんでした。リンクはすべて空でした。

注## ブートストラップ css を使用しています。

0 投票する
2 に答える
859 参照

javascript - 透過要素を削除する

nav タグを介してネスト可能なナビゲーション メニューを効果的に構築するためのカスタム ディレクティブ セットがあります。以前、トランスクルージョンされたテキストの内容を取得する方法についていくつか質問がありました。私はそれを理解しましたが、後でテンプレートに表示されないように、トランスクルードされた要素を削除する方法があるかどうか疑問に思いますThis Plunkerを使用すると、要素がトランスクルージョンされた要素のテキストを取得していることがわかります。しかし、それはまだng-transcludedivに含まれています。

plunker 内のコードを見ることができますが、plunker 内の対応するコードは次のとおりです。

価値についての私の知識$transcludeは最小限です-私がここで取り組んだ作品は、ここで多くのグーグルとチェックの質問に出くわしただけです.

あなたが提供できる助けに感謝します。

0 投票する
4 に答える
7733 参照

angularjs - angular-ui-tree: ドロップされた場所 + ディレクティブでドロップされたイベントをキャッチ

アプリでアイテムのツリーを構築するためにangular-ui-treeを使用しています。ドラッグ アンド ドロップ機能を使用していますが、ドロップがいつどこで (どの要素で) 発生するかを知る必要があります。

たとえば、item1 をドラッグしてパネルにドロップします。パネルにアイテム名を表示させたい。(各アイテムには name プロパティがあります)。パネルは、内部にテキストを含む単純な div です。

ドキュメントで、コントローラーの「ドロップされた」イベントにアクセスできることを見ました。しかし、ドラッグ&ドロップされたアイテムに応じてパネルの内容を変更する方法がわかりません。