更改值后刷新 Angular 视图答案

【问题标题】：Refreshing Angular view after changing a value更改值后刷新 Angular 视图
【发布时间】：2015-11-25 03:28:53
【问题描述】：

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

我有一个页面，其中的数据来自 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.logangular.element($('#product-section')).scope().ProductList，我可以看到它的 showProduct 已经正确地从 1 更新到 0。

我假设我需要做一些事情才能使 productList 被“重新解析”并在页面中刷新。但是我不确定如何做到这一点。

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

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

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

非常感谢任何指针。

【问题讨论】：

标签： javascript jquery html angularjs

【解决方案1】：

试试这个：

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

通过这样做，你告诉 AngularJS 观察你的封闭代码正在做什么并相应地更新视图。

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

【讨论】：

请注意：$scope.$apply could 单独使用时可能会出现问题（可能已经运行了一个摘要循环。）。你可以使用$timeout(callback-func, 0) 来解决这个问题。

【解决方案2】：

Angular 使用两种方式的数据绑定，当您使用定义模型的 Angular-Controller（或 Directive 等）时，这种方式有效。在您的 HTML 中，您使用类似这样的内容（非常粗略的示例）：

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

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

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

范围（模型）绑定到某个 Angular-Controller（或 Directive，...）。因此，您需要拥有它，才能在此处使用双向绑定。

希望有帮助

【讨论】：