AngularJS中ng-click切换FontAwesome类失效问题求助

我完全明白你的困扰——控制台里toggle明明在true和false之间正常切换，但FontAwesome的图标就是没法从空心变成实心。这背后其实是FontAwesome 5的JavaScript嵌入方式在搞鬼！

问题根源 #

你引入的是FontAwesome的all.js脚本，这个脚本会自动把页面里的<i>标签转换成<svg>元素来渲染图标。一旦转换完成，原来<i>标签上的ng-class绑定就和新生成的<svg>没关系了——Angular追踪的是原来的<i>，但用户看到的是替换后的<svg>，所以即使toggle值变化，图标样式也不会跟着更新。

最简单的解决方案：改用FontAwesome CSS版本 #

直接把JS引入换成CSS链接，这样<i>标签不会被替换，Angular的ng-class绑定就能正常生效了：

修改你的HTML头部，把这行：

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

替换成：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">

修改后的完整头部代码：

<head>
  <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

这样点击按钮时，ng-class会正确给<i>标签切换fas和far类，图标就能正常在空心和实心之间切换了。

如果你坚持要用JS版本（不推荐） #

如果因为某些原因必须用FontAwesome的JS版本，那你可以手动在favMovie函数里操作DOM来切换类，但这绕开了Angular的数据绑定，不是最佳实践：

$scope.favMovie = function() {
  $scope.toggle = !$scope.toggle;
  const iconElement = document.querySelector('.favorite-btn i');
  if ($scope.toggle) {
    iconElement.classList.remove('far');
    iconElement.classList.add('fas');
  } else {
    iconElement.classList.remove('fas');
    iconElement.classList.add('far');
  }
}

不过要注意，FontAwesome的JS可能会在某些情况下重新替换元素，导致这个方法失效，所以还是优先推荐用CSS版本。

内容的提问来源于stack exchange，提问作者Dustin Hammack