ui-view内のjqueryは、移動して戻ったときに開始されません。 AngularJs1.6.1

Question

私はAngular 1.6でビルドしています。ページに移動して戻ってきたときにjQueryが機能しなくなる一般的な理由はありますか？しかし、リフレッシュすると、すべてうまく動作します。コンソールにエラーはありません。

HTML

html 
    body 
    header 
    main ui-view 
    footer 

    script - jquery 
    script - angular 
    script - angular dependencies 
    script - controllers 
    script - main.js <-- 
    /body 
/html 

についての特別なものは何もありませんmain.jsの内部で、私はこの

$(function() { 
    $('.scroll').slimScroll({ 
     height: '100%' 
    }); 
}); 

ようSlimscrollコードは、私は何に.scrollクラスIに適用slimscrollをしたいことを添付してい。場所の中には、身体、メニュードロップダウン、ダッシュボード内に隠れたオーバーフローと高さが固定されたウィジェットがあります。

私がページ（dashboard.html）に入ると、slimscrollが動作しているときにビューが正常に読み込まれます。移動して戻ってくると、スリムスクロールはもはや機能しません。今ここにキッカーです！

• のみビュー内の項目が影響を受けています！スリムスクロールスクリプトは、メニューのドロップダウンや本体に対してはまだ動作します。私は、ビューを更新すると（ベクトル地図、モリスチャート、など）jQueryを使って動作します基本的には何も
• slimscrollは、私が例として使用しています一つですが、実際、何が実際に動作しない
• 、それはすべて
の作品
• コンソールにエラーはありません

何が得られますか？

p.s.はい、私はdocument.readyを使用していますが、以下のコードがdocument.readyの外にあり、リロードするまで動作しないため、問題はありません。 jqueryのをブロックし、それがそうであった場合、DOMを通過するが、その同じ呼吸にない場合

これは、次いで、ヘッダ内のスクリプトは、いずれかの動作しないほぼそのまま。影響を受けるのはビューのみです。

history.pushState(null, null, location.href); 
window.onpopstate = function(event) { 
    history.go(1); 
}; 

Answer 1

$('.scroll').slimScroll({ 
    height: '100%' 
}); 

これは2つのことを行います - CSSクラスを持つすべての要素を選択し、それぞれにjQueryプラグインを適用します。新しい要素には適用されません。ビューの変更/バック/フォワード - ビュー要素がすべてのhtml要素で再作成されたとき。それは実際にそれです。 （これはui-viewとは関係ありませんが、動的に作成された要素には当てはまります - 実際にあなたのケースで何かがうまくいくかどうか不思議です）

どうすればいいですか？すべてのjqueryをディレクティブに入れます。新しい要素が作成され、コンパイルされると、angleがこのディレクティブを実行します。

.directive('scroll', function() { 
    return { 
    restrict: 'C', 
    link: function(sc, elem, attrs) { 
     $(elem).slimScroll({ 
     height: '100%' 
     }); 
    } 
    } 
})