Angular -在数据更新后运行jQuery

Angular - Run jQuery after data update

本文关键字：运行 jQuery 更新 数据 Angular      更新时间：2023-09-26

我使用的是Angular 1.4.7。我没有建立这个网站，所以我不确定我需要提供什么信息。我们正在呈现一些搜索过滤器，但是否启用它们是由从服务器检索的数据配置的，例如:

$scope.searchFields = {
    "date": true,
    "price": true,
    ...
};

搜索字段的HTML ($scope.filter是这个特定过滤器的一个单独的变量集，在这种情况下它只是选择一个最大的数值):

<div class="limit-group clearfix">
    <span class="detail">Filter Name:</span>
    <div class="filter-select-small">
        <select name="filter" class="custom-select" ng-if="searchFilters.code">
            <option value="">No Max</option>
            <option ng-repeat="(key, value) in filter" value="<%key%>"><%value%></option>
        </select>
        <span class="unavailable" ng-if="!searchFilters.code">Unavailable</span>
    </div>
</div>

在某些情况下，可用的搜索字段会发生变化。不管出于什么原因，选择字段被一个名为selectbox的jQuery插件所取代。我有一个函数resetFilterStyles()重新连接到字段的jQuery插件，但我不确定在哪里触发它。

在$scope上定义的方法内部，数据正在使用$http.get()进行更新，但在这些匿名函数中运行resetFilterStyles()不起作用，大概是因为Angular还没有处理已经更新的数据，所以resetFilterStyles()执行的更改将被Angular对DOM的更新所撤销。

我试过设置一个$watch处理程序，但这似乎是错误的地方运行我的函数，因为它似乎不采取，要么(并额外导致严重的错误在Angular中)。作为一个不使用Angular的人，我不知道该从哪里开始。

编辑

复位功能:

function resetFilterStyles() {
    // desktop adv filters
    var filterContainer = $('.advance-filter-dropdown');
    $('select',filterContainer).selectbox('detach');
    $('select',filterContainer).selectbox('attach');
    $(".filter-select-small .sbOptions").niceScroll({cursorborder:"",cursorcolor:"#ccc",autohidemode: false});
    // mobile adv filters
    var filterContainer = $('.filter-wizard-mobile');
    $('select',filterContainer).selectbox('detach');
    $('select',filterContainer).selectbox('attach');
    $(".filter-select-small .sbOptions").niceScroll({cursorborder:"",cursorcolor:"#ccc",autohidemode: false});
}

从AngularJS的角度来看，你不应该在控制器中修改DOM。你应该创建一个指令/组件来处理它。

但是，如果您确实必须使用jQuery(例如遗留项目)，您可以使用将DOM修改放入$timeout:

$http.get("url").then(function() {
        $timeout(function() {
          // updateDom
        }, 0);
});
相关文章：