Question

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

我有一个页面，其中的数据来自Angular。这是一堆产品。每个产品都有一个名为showProduct的属性，用于确定是否应显示该属性。首次从后端获取showProduct属性时，1属性设置为ng-show={{product.showProduct}}。在渲染html时，我在每个产品div中都有 ng-show。 prod = angular.element($('#product-section')).scope().ProductList;首次加载时会正常工作，所有产品都会显示。如果从后端我为任何产品设置为0，则隐藏它。

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

所以我做了以下事情：

prod

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

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

我假设我需要做些什么才能使productList在页面中“重新解析”并刷新。但是我不知道该怎么做。

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

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

我尝试过{{1}}，但这不起作用。

非常感谢任何指针。

Answer 1

试试这个：

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

通过这样做，您可以告诉AngularJS观察您所附代码的作用并相应地更新视图。

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

Answer 2

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更改控制器时，您的视图都会自动更新。

范围（模型）绑定到某些Angular-Controller（或Directive，...）。所以你需要拥有它，以便在这里使用双向绑定。

希望有所帮助

更改值后刷新角度视图

2 个答案: