AngularJS 在 ng-click 上切换字体真棒类答案

【问题标题】：AngularJS Toggling fontAwesome class on ng-clickAngularJS 在 ng-click 上切换字体真棒类
【发布时间】：2018-11-09 23:50:21
【问题描述】：

我正在尝试更改使用 font awesome 库创建的元素的类。基本上，我希望在初始加载时不填写心脏并拥有类 - 'far'，然后单击按钮我希望心脏更改为填充心脏的类 - 'fas'。它会在初始加载时显示“far”类，但在单击按钮时不会更改为“fas”类。

HTML：

<button class="favorite-btn" ng-click="favMovie()">
  <i ng-class="{'fas' : toggle, 'far' : !toggle}" class="fa-heart"></i>
</button>

JS：

var app = angular.module("movieApp", []);
app.controller('DetailsController', function($scope, $log) {
  $scope.toggle = false;
  $scope.favMovie = function() {
      console.log($scope.toggle);

      $scope.toggle = !$scope.toggle;

      console.log($scope.toggle);
    }
});

我搜索了其他堆栈问题/答案，但没有任何帮助。

这在控制台中确认它实际上正在更改切换状态（toggle === true || toggle === false），但没有更改类。

演示：

// Code goes here

var app = angular.module("movieApp", []);
app.controller('DetailsController', function($scope, $log) {
  $scope.toggle = false;
  $scope.favMovie = function() {
			console.log($scope.toggle);
			
			$scope.toggle = !$scope.toggle;
			
			console.log($scope.toggle);
		}
});

/* Styles go here */

button {width:150px; height:150px; font-size:5em;}

<!DOCTYPE html>
<html ng-app="movieApp">

  <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>
    <script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <link rel="stylesheet" href="style.css" />
    <!--<script src="lib/angular/angular.min.js"></script>-->
    <script src="script.js"></script>
  </head>

  <body ng-controller="DetailsController">
    <button class="favorite-btn" ng-click="favMovie()">
      <i ng-class="{'fas' : toggle, 'far' : !toggle}" class="fa-heart"></i>
    </button>
  </body>
  
  <!-- {{heartClass}}  {'fas' : toggle, 'far' : !toggle} -->

</html>

非常感谢任何帮助！

【问题讨论】：

标签： javascript html angularjs font-awesome

【解决方案1】：

因为您使用的是 FA 图标作为 JS，所以图标将呈现为 SVG 格式。因此，SVG 不是您所期望的正常元素，并且在 Angular 功能中起作用。你应该尝试另一种方法来处理这个问题。请检查我的代码 sn-p 波纹管：

// Code goes here

var app = angular.module("movieApp", []);
app.controller('DetailsController', function($scope, $log) {
  $scope.toggle = false;
  $scope.favMovie = function() {
			$scope.toggle = !$scope.toggle;
		}
});

/* Styles go here */

button {width:150px; height:150px; font-size:5em;}

<!DOCTYPE html>
<html ng-app="movieApp">

  <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>
    <script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <link rel="stylesheet" href="style.css" />
    <!--<script src="lib/angular/angular.min.js"></script>-->
    <script src="script.js"></script>
  </head>

  <body ng-controller="DetailsController">
    <button class="favorite-btn" ng-click="favMovie()">
      <span ng-if="!toggle"><i class="far fa-heart"></i></span>
      <span ng-if="toggle"><i class="fas fa-heart"></i></span>
    </button>
  </body>
  
  <!-- {{heartClass}}  {'fas' : toggle, 'far' : !toggle} -->

</html>

【讨论】：

正是我所需要的，这非常有效。谢谢！