更改值后刷新角度视图

Refreshing Angular view after changing a value

本文关键字：视图 刷新      更新时间：2023-09-26

因为我正在处理的页面是一个遗留页面，有很多死/活/僵尸代码，所以我无法将其全部粘贴到这里。因此，我试图用示例代码发布我的问题摘要。

我有一个页面，其中的数据来自Angular。这是一堆产品。每个产品都有一个名为showProduct的属性，用于确定是否应显示该产品。首次从后端提取showProduct属性时，该属性被设置为1。在渲染html时，在每个产品div中，我都有ng-show={{product.showProduct}}。ng-show第一次加载时工作正常，显示所有产品。如果我从后端将任何产品的此值设置为0，则它是隐藏的。

一旦产品被加载，如果用户点击一个按钮，我需要隐藏其中的一些产品。这个按钮点击处理程序在jQuery中。

所以我做了以下事情：

  prod =  angular.element($('#product-section')).scope().ProductList;

prod现在是一系列具有其属性的产品。现在我遍历这个数组，检查有问题的属性（根据单击的按钮我知道），并根据每个产品的值，将showProduct属性设置为0。

但是，这不会更新视图以隐藏该产品。如果我console.log angular.element($('#product-section')).scope().ProductList，我可以看到它的showProduct已经正确地从1更新到0。

我假设我需要做一些事情，以便在页面中"重新解析"和刷新productList。但是我不知道该怎么做。

我只需要一些关于我可能遗漏的概念性提示，因为我知道为我的情况提供"特定"的代码提示是很困难的。

简而言之，一旦我从外部更新了角度值，我该如何告诉angular重新分析代码并刷新视图？类似于模型在更新文本框中的数据时自动发生的情况。。。

我试着做angular.element($('#product-section')).scope().$apply();，但没有成功。

任何指示都将不胜感激。

试试这个：

$scope.$apply(function() {
    angular.element($('#product-section')).scope().ProductList;
});

通过这样做，您告诉AngularJS注意所附代码的执行情况，并相应地更新视图。

只是一些考虑：难道你不能直接更新模型而不是调用外部代码吗？始终建议使用这种方法。

Angular使用双向数据绑定，当您使用Angular Controller（或Directive等）来定义模型时，这种绑定有效。在你的HTTML中，你使用这样的东西（非常粗糙的例子）：

<div ng-controller="myProductListController>"
    <div ng-repeat="(index, product) in productList">
        <div>{{ product.name }}</div>
    </div>
</div>

productList在您的myProductListController中，并且在ng-controller指令的范围（您的型号）中可用。

现在，每次控制器中的productList发生更改时，视图都会自动更新。

作用域（模型）绑定到某个角度控制器（或指令，…）。因此，为了在这里使用双向绑定，您需要有它。

希望对有所帮助

相关文章：