javascript - 階層 - ui-router resolve



1つの要素をあるコンテナから別のコンテナに移動すると、範囲の問題はありますか? (1)

このような状況があることを考慮して、

<div class="site-frame">
    <div class="auxiliary"></div>

    <div class="main" ui-view>
        <div class="componentA">
        </div>

        <div class="componentB" move-to=".auxiliary" breakpoints="1,2,3,4">
            <!-- CONTENTS OF componentB -->
        </div>

        <div class="componentC">
        </div>
    </div>
</div>

要素.componentBmove-toというディレクティブがあり、jQueryの子ワイルドカードセレクタ( var contents = $('.componentB').find('> *'); .componentB var contents = $('.componentB').find('> *');ように、この要素の内容を単純に移動しvar contents = $('.componentB').find('> *'); )、 breakpointsディレクティブで定義されたbreakpointsポイントのいずれか(これらの数値は、ブレークポイントの測定値を保持する1つの配列のインデックスです)が現在発生しています。

そのディレクティブのいくつかのブレークポイントがアクティブな場合、DOMはこれに変わります:

<div class="site-frame">
    <div class="auxiliary">
        <!-- CONTENTS OF componentB -->
    </div>

    <div class="main" ui-view>
        <div class="componentA">
        </div>

        <div class="componentB" move-to=".auxiliary" breakpoints="1,2,3,4">
        </div>

        <div class="componentC">
        </div>
    </div>
</div>

これは私が扱っている1つのウェブサイトの静的なバージョンで使用されている応答的なメカニズムです。 私が必要とするのは、スコープの継承、イベントブロードキャスト、状態コントローラの欠陥があるかどうかを知ることですdiv.main 、それ自体がdiv.auxiliary兄弟です。

どのような角度になっているのだろうかと思うと、JSロジックレイヤーはDOM要素間の関係をあるスコープで参照していると思います。 link()関数を使用する主にディレクティブスコープを使用していますlink()関数は、リンクが既に作成されているため、DOM操作がより安全になるように性質上post-link()です。

スコープ$destroyイベントをリッスンしながら、 link()関数内の.componentBコンテンツの参照を保持して、メモリリークを回避して処理をクリアすることに留意してください。 また、このシステムは$window.on('resize')をリッスンして現在のブレークポイントを検出し、ナビゲーション中に私のサンプルの内容を元のコンテナと補助の間で移動できる可能性があります。

ですから、問題は、DOMを介して1つの要素を移動すると、UIビューの親の外側であっても、データバインディングや継承などの変数の更新を数えることは安全ですか?

私はアプリケーションの巨大なサイズのために実装する前にこれを尋ねています、そしていつものように生産的な走りでは、これについて議論する余地はありませんでした...

編集1:

一時的に、このCodePenにはより多くのチャンスがあります: http ://codepen.io/anon/pen/JXPvBE?editors=0010

コードは私が必要としていることをしていますが、私は最終的なアプリの中でそれをテストする必要があります。


私は他のタスクを開発していましたが、問題の編集1に掲載された解決策は、これに対処する良い方法を指摘しました。

親要素の元のコントローラの永続性に関する疑問は、この状況で何らかの形でリークが発生したことを意味します。たとえば、モデルの他の更新が変更に影響を受けない可能性があり、問題は認められなかった。

おそらく他の状況では失敗する可能性がありますが、今のところうまくいきます:

http://codepen.io/anon/pen/JXPvBE?editors=0010

CodePenでは、命令のmove-to開始時に、リンク前のフェーズでコンパイル機能が要素の参照を保持し、元の形式を使用して操作します。 ng-repeat )ので、ディレクティブの場所を制限するコメントを扱っていません。

<!-- ng-repeat: x in collection -->
<li class="repeated-element">
    ...
</li>
<!-- end ng-repeat: x in collection -->

応答性の高い問題に対処するには良い方法ですが、SPAの機能には余裕がなく、ページ全体をカバーし、注意が必要な要素を適切に配置する補助コンテナに配置する必要があります。サイドパネル付き携帯電話のネイティブアプリ。+





angular-ui-router