ビューが変更されたときにAngularJSからJQuery関数を呼び出す方法

Question

私はAngularJSを使い慣れていません。アプリケーションにjQuery custom content scrollerを実装する際に問題を処理しています。

私は角を使ってコンテンツを更新するときにスクロールバーを更新する必要があります。スクロール側にはupdateメソッドがあります。私の問題は、私はそれをどこに呼び出すべきかわからないということです。私は角度の$http.postの成功ブランチの更新メソッドを呼び出ししようとしていた

<div class="scroll-list nice-scrollbars"> 
    <ul class="gallery clearfix"> 
     <li class="extra-alt" ng-repeat="item in relatedItems.data"> 
      ... 
     </li> 
    </ul> 
</div> 

：コンテンツのマークアップは以下の通りである

$scope.relatedItems = $http.post($scope.url, { 
    'filterType': 'related', 'film': id 
}).success(function() { 
    $(".nice-scrollbars").mCustomScrollbar('update'); 
}); 

これは動作しませんでしたが、私はそれがだと思うとき理由成功メソッドが呼び出され、ビューの内容はまだ更新されていません（alert関数を使用して表示され、ダイアログボックスを閉じた後にデータが表示されます）

スクロールバーを使用できる唯一の方法は、アドバンコンテンツの変化を見るためCEDプロパティ（これらはスクロールバーに渡されるオプションです）：

var scrollbarOpts = { 
    scrollButtons:{ 
     enable:true 
    }, 
    advanced:{ 
     updateOnContentResize: true 
     //@TODO: get rid of this, correctly find where to call update method 
    } 
} 

これは、このオプションは、スクリプト全体のパフォーマンスを低下させるので、悪い習慣です。 私は、必要に応じてDOMを更新するために必要なjQueryメソッドを呼び出す正しい場所はどこですか、あるいはそのようなバインディングがAngularJSで正しく行われた変更を表示する方法を知っていますか？

Answer 1

DOM操作は、コントローラではなくディレクティブで行う必要があります。このディレクティブはモデルの変更を$ watch（）する必要があり、ウォッチコールバックはjQuery DOM操作を実行する必要があります。 AngularがDOMを更新/変更した後（ただしブラウザがレンダリングされる前に）、jQueryコードを実行するために$ evalAsyncが必要になることがあります。ブラウザがレンダリングした後に何らかのアクションを実行する場合は$timeoutを使用してください。 this answerを参照してください。ここでは、モデルプロパティを$ watch（）するためのディレクティブを使用する方法を示し、mock fetch（）関数で$ evalAsyncを使用しました。あなたの特定のケースについては

、私はディレクティブでは、あなたが最初に次のことを試してくださいお勧め：

scope.$watch("relatedItems.data", function() { 
    $(".nice-scrollbars").mCustomScrollbar('update'); 
}); 

と問題が解決しない場合は、この方法を試してください。

scope.$watch("relatedItems.data", function() { 
    scope.$evalAsync( // you might need to wrap the next line in a function, not sure 
     $(".nice-scrollbars").mCustomScrollbar('update') 
    ); 
});