javascript - AngularJS $watch 变量并重新评估 ng-class 表达式

Question

我正在尝试在我的应用程序中实现一个类似书签的功能，并且必须观察一个变量，该变量存储所有带书签的 ID。基于该变量，我必须告诉ng-class重新评估它的函数表达式，以便bookmarked添加或不添加类。

当变量更改时，我如何告诉ng-class再次运行？$scope.Bookmarks

<a ng-repeat="event in events"
   ng-class="isBookmarked(event.id)"
   class="icon__bookmark"></a>

score 4 · Accepted Answer

如果书签 ID 在由 angular 处理的代码中发生更改（例如在控制器、指令、服务、$http 回调等中），那么您根本不需要做任何事情。Angular 会在需要时自动重新评估isBookmarked(event.id)，以确保 UI 始终是最新的。

如果由于某种原因，更新必须在 angular 处理的代码之外完成（例如在外部库中），那么您可以手动强制 angular 进行更新。但是，强烈建议只确保代码由 angular 处理。您通常可以这样做，但这取决于具体情况。

如果你需要强制它，那么使用$scope.$apply如下：

$scope.$apply(function() {
  // Write code here to update bookmark ID's
});

score 1 · Accepted Answer

假设您要向锚标记添加一个名为“bookmarked”的类并且 isBookmarked 返回一个布尔值，使用这个（小提琴）：

<a ng-repeat="event in events" 
   ng-class="{bookmarked: isBookmarked(event.id)}" 
   class="icon__bookmark">{{event.name}}</a>

如果书签数组在控制器中，您不必调用 $apply，请参阅我提供的小提琴。

score 0 · Accepted Answer

试试$route.reload()。它适用于仅在页面加载时评估一次的指令（例如使用 JQuery 进行 DOM 操作的类型）。

3 回答 3