如何在視圖更改時從AngularJS調用JQuery函數

Question

我是AngularJS的新手，我正在處理一個問題，同時在我的應用程序中實現jQuery custom content scroller。

我需要更新滾動條，當我用Angular更新內容時，爲此滾動條有一個update方法。我的問題是，我不知道在哪裏叫它。對於內容的標記如下：

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

我試圖打電話給在角的$http.post的成功分支的更新方法：

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

這沒有工作，我認爲這是因爲當成功的方法被調用，視圖內容還沒有更新（我可以看到它使用alert函數，數據在關閉對話框後出現）

我能夠使滾動條工作的唯一方法是使用滾動條ADVAN觀看的內容的變化（這是傳遞到滾動條的選項），CED屬性：

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

這是不好的做法，因爲這樣的選擇降低了整個腳本的性能。 我想知道，根據需要在哪裏調用jQuery方法來更新DOM所需的正確位置，或者如何通過這種綁定來查看在AngularJS中正確執行的更改？

Answer 1

DOM操作應該在指令（而不是控制器）中完成。該指令應該監視（）你的模型的變化，手錶回調應該執行jQuery DOM操作。有時需要$ evalAsync來在Angular更新/修改DOM之後運行jQuery代碼（但在瀏覽器呈現之前，如果您想在瀏覽器呈現後執行某些操作，請使用$timeout）。請參閱this answer，其中我提供了一個演示如何使用指令來$ watch（）模型屬性的小提琴，並且在模擬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') 
    ); 
});