問題タブ [ng-view]

ng-view が共通の近い親を共有しない 2 つの DOM 要素をバインドする方法はありますか?

ng-view についての私の理解では、DOM 要素をバインドしてテンプレートを動的に切り替える (さらにビューを生成する) ということです。たとえば、ボックス モデルの意味で「近接性」が非常に低い検索バーとラベルがあるが、アーキテクチャ上は同じコントローラーにバインドする必要がある場合はどうなりますか?

同じコントローラー要素に共通の親を共有させ、通常は悪い CSS スタイリング プラクティスに訴える以外に、これを回避する方法はありますか?

今週、モバイル アプリにスワイプを実装しましたが、両方向のスワイプを示す明確なデモは見つかりませんでした。それで、私はコミュニティに少し恩返しをすることにしました。それは、理解できない奇妙な行動に気付くまででした。

デモをテストするために、デモに 2 つのボタンを配置しました。スワイプするには、テキストの横でマウスを使用できます。何が起こるかというと、デモをロードして既存の ngView をスワイプすると、slideDir からクラスが取得されますが、新しいクラスは取得されません。これは、新しいビューに新しいスコープがあり、slideDir がどうあるべきかわからないために発生します。

ケース 2 は、スワイプする前にボタンを押した場合です。slideDir が作成され、ボタンが使用しているスコープに入力されているため、スワイプはほぼ正常に動作し始めます (2 つのスコープ間の同期の問題以外)。

では、私の構成で何が間違っているのでしょうか? 私は、アプリ コントローラーがより高い位置にある div にあるため、新しい ngView が読み込まれるたびにこれが再起動されないと想定していました。

次の URL にデモが含まれています: http://blackunknown.com/demos/swipingdemo/demo.html

body タグでの設定は次のとおりです。

これが私のJavaScriptです：

編集:実際のスワイプを実行するには、ボタンを使用せずに、テキストの横をクリックしてドラッグします。

AngularJsを学ぶためのサンプル アプリケーションを開発していました。

には 3 つの異なるテンプレートを表示する 3 つのリンクがありますng-view。

main.html には 3 つのリンクがあります。

ここにアンカーがあります：

それは正常に動作します。しかし、新しいタブでリンクを開こうとすると、開かれません。

ルーティングはクライアント側で行われ、サーバーはそれを認識していないことを理解しています。

どんな提案も役に立ちます。

オンラインで検索しても、適切な回答が見つかりませんでした。

ありがとう。

編集::サーバー側のコード。

nginxで：

ビュー (img タグをリストする詳細 itemId パーシャル) はコントローラーからレンダリングされます。itemId が指すモデルによって img の数が異なります。ing タグを含む div を # of img x img width に変更する必要があります。

そのためには、部分的な us がレンダリングされた後に、ビュー内の JavaScript が実行されるようにする必要があります。

どうやってするか？

angular jsのrouteProviderでhtmlをロードするアプリケーションがあります。html の 1 つに、ng-switch に基づく html がさらに含まれています。子htmlには、テーブル付きのパネルがあります。これらのテーブルをレスポンシブにしたいのですが、クラス table-responsive を使用してテーブルを div に埋め込んだ後でも、テーブルが div に収まるように表示されません。

さらにwidgets.htmlには、次のコードがあります。

tables.html には、次のマークアップがあります

次のplunkerをご覧くださいhttp://plnkr.co/edit/34JedA ng-gridを使ったシンプルなアプリです。私がする必要があるのは、編集ボタンがクリックされたときに編集ページに移動することです。グリッド内の編集ページの列に移動する代わりに、めちゃくちゃになります。なぜそれが起こっているのか、そしてそれを修正するために私に何ができるのかを誰かが説明してもらえますか.

1. input に char を入力するとロードされますtype="search"。
2. ページが 'ajax call' を 2 回呼び出しています。「シングルクリック」または「onPageload」でリクエストが2回発生する

index.Html

これは、検索ボックスを持つ私のhtmlファイルです

この検索ボックスは添付されていませんが、なぜこのようなばかげたことが起こっているのでしょうか??

テンプレートの URL がこれにロードされていますng-view

index.js ファイル:

ここでは、テンプレート URL のルーティングの構成を定義しました。

ここでは、ajax 呼び出しをサーバーに送信し、json オブジェクトを返すサービスを作成しました。各リクエストでajax呼び出しを2回呼び出し、2つの「Json」データオブジェクトを返します。

モデルからの HTML が挿入されるテンプレート URL にこのタグがあるとします (HTML は基本的に <li> 箇条書きです)。

モデルの一部は次のとおりです。

ご覧のとおり、一部の <li> には、ポップアップを開くためのタグが含まれています。

私が抱えている問題は、パーシャルに挿入されると、スパンが彼の属性から切り離されることです。

何か案が？

ng-views 間でアクションバーを共有する角度のあるアプリがあります:

ng-view には「slideOutLeft」クラスがあり、現在のビューを左にアニメーション化すると同時に、新しいビューを右からアニメーション化します。

問題は、アクション バーの内容が ng-view 間で大きく異なる場合があり、ng-view のコントローラーとその兄弟であるアクション バー間の通信ブリッジとして使用するファクトリを作成することが非常に難しいことです。 ng-ビュー。明らかな答えは、アクションバーを ng-view 内に配置して、ビューごとに異なるようにし、アクションバーがビューコントローラーのスコープにアクセスできるようにすることです。ただし、アクションバーを ng-view と一緒に「slideOutLeft」にしたくありません。その下のng-viewがアニメーション化している間、アクションバーのコンテンツを固定したままにしたいだけです。

DOM を並べ替えると、

ng-view のテンプレート ファイルに含まれていますが、ページ遷移中にアクションバーが残りの ng-view と一緒にアニメーション化されないようにする方法はありますか?