Javascript 当视图更改时，如何从AngularJS调用JQuery函数

我是AngularJS的新手，在应用程序中实现时遇到了一个问题

当我用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>

这不起作用，我想这是因为当调用success方法时，视图内容还没有更新（我可以使用

警报

功能看到它，数据在关闭对话框后出现）

我能够使滚动条工作的唯一方法是使用滚动条的advanced属性来查看内容中的更改（这些是传递给滚动条的选项）：

这是一种糟糕的做法，因为此选项会降低整个脚本的性能。

---

我想知道，根据需要调用更新DOM所需的jQuery方法的正确位置在哪里，或者这种绑定如何在AngularJS中正确执行视图更改？DOM操作应该在指令（而不是控制器）中完成。指令应该$watch（）用于更改您的模型，watch回调应该执行jQuery DOM操作。有时需要$evalAsync在Angular更新/修改DOM之后（但在浏览器呈现之前）运行jQuery代码。如果要在浏览器呈现之后执行某些操作，请使用

$timeout

）。请看，在这里我提供了一个fiddle，展示了如何使用$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')
   );
});

---

非常感谢。第一个例子就足够了，尽管有一个小的改动——不知何故jQuery选择器不起作用，但我使用了指令中的

元素
var，它起作用了。干杯我试过了，但没能成功。我不得不用定时器。
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')
   );
});