Javascript 更改视图时如何从 AngularJS 调用 JQuery 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14002864/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to call a JQuery function from AngularJS when a view is changed
提问by Teo.sk
I'm new to AngularJS, and I'm dealing with a problem while implementing jQuery custom content scrollerinto my application.
我是 AngularJS 的新手，我在将jQuery 自定义内容滚动器实现到我的应用程序中时遇到了一个问题。
I need the scroller to update, when I update the content with Angular, for this the scroller has an updatemethod. My problem is, that I don't know where to call it. The markup for the content is the following:
我需要滚动条更新，当我用 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>
I was trying to call the update method in success branch of Angular's $http.post:
我试图在 Angular 的成功分支中调用更新方法$http.post：
$scope.relatedItems = $http.post($scope.url, {
'filterType': 'related', 'film': id
}).success(function() {
$(".nice-scrollbars").mCustomScrollbar('update');
});
This didn't work, I think it's because when the success method is called, the view content is not updated yet (I could see it using an alertfunction, the data appeared after closing the dialog box)
这个不行，我想是因为调用success方法的时候，view的内容还没有更新（用alert函数可以看到，关闭对话框后出现了数据）
The only way I was able to make the scrollbars work was using the scroller's advanced property for watching the changes in the content (these are the options passed to the scrollbar):
我能够使滚动条工作的唯一方法是使用滚动条的高级属性来观察内容的变化（这些是传递给滚动条的选项）：
var scrollbarOpts = {
scrollButtons:{
enable:true
},
advanced:{
updateOnContentResize: true
//@TODO: get rid of this, correctly find where to call update method
}
}
This is bad practice, as this options reduces the performance of the whole script. I would like to know, where is the correct place to call jQuery methods needed to update DOM as needed, or how is such binding to view changes done correctly in AngularJS?
这是不好的做法，因为此选项会降低整个脚本的性能。 我想知道，根据需要调用更新 DOM 所需的 jQuery 方法的正确位置在哪里，或者如何在 AngularJS 中正确完成这种绑定以查看更改？
回答by Mark Rajcok
DOM manipulation should be done in a directive (not a controller). The directive should $watch() your model for changes, and the watch callback should perform the jQuery DOM manipulation. Sometimes $evalAsync is needed to run the jQuery code after Angular has updated/modified the DOM (but before the browser renders. Use $timeoutif you want do perform some action after the browser renders). See this answer, where I provided a fiddle showing how to use a directive to $watch() a model property, and I used $evalAsync in a mock fetch() function.
DOM 操作应该在指令（而不是控制器）中完成。该指令应该 $watch() 您的模型进行更改，并且 watch 回调应该执行 jQuery DOM 操作。有时，在 Angular 更新/修改 DOM 之后（但在浏览器呈现之前。$timeout如果您想在浏览器呈现之后执行某些操作，请使用 $evalAsync 来运行 jQuery 代码）。请参阅此答案，其中我提供了一个小提琴，展示了如何使用 $watch() 模型属性的指令，并且我在模拟 fetch() 函数中使用了 $evalAsync。
For your particular case, I suggest you first try the following, in a directive:
对于您的特定情况，我建议您首先在指令中尝试以下操作：
scope.$watch("relatedItems.data", function() {
$(".nice-scrollbars").mCustomScrollbar('update');
});
and if that doesn't work, try this:
如果这不起作用，请尝试以下操作：
scope.$watch("relatedItems.data", function() {
scope.$evalAsync( // you might need to wrap the next line in a function, not sure
$(".nice-scrollbars").mCustomScrollbar('update')
);
});
