更改值后刷新角度視圖

Question

因為我正在處理的頁面是一個遺留頁面，其中包含大量的死代碼/死代碼/僵屍代碼，所以無法將其全部粘貼到此處。 因此，我嘗試通過示例代碼發布問題摘要。

我有一個頁面，其中數據來自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(); 但這沒有用。

任何指針，不勝感激。

Answer 1

嘗試這個：

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

這樣，您就是在告訴AngularJS觀察所包含的代碼在做什么，並相應地更新視圖。

只是一些考慮：您是否能夠直接更新模型而不是調用外部代碼？ 始終建議使用此方法。

Answer 2

當使用Angular-Controller（或Directive等）定義模型時，Angular使用兩種方式進行數據綁定。 在您的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，...）。 因此，為了在此處使用雙向綁定，您需要具有該功能。

希望能有所幫助