AngularJS在ng-click上切换fontAwesome类
[英]AngularJS Toggling fontAwesome class on ng-click
问题描述
I am trying to change the class on an element created with the font awesome library. 
我正在尝试更改使用字体真棒库创建的元素上的类。 Basically, I want on initial load the heart to not be filled in and have the class - 'far', then on click of button I want the heart to change to the class that fills the heart in - 'fas'. 基本上，我想要初始加载心脏不被填写并且有类 - “远”，然后点击按钮我希望心脏改变到充满心脏的类 - 'fas'。 It does show the 'far' class on initial load, but does not change to the 'fas' class when the button is clicked. 它确实在初始加载时显示'far'类，但在单击按钮时不会更改为'fas'类。
HTML: HTML：
<button class="favorite-btn" ng-click="favMovie()">
<i ng-class="{'fas' : toggle, 'far' : !toggle}" class="fa-heart"></i>
</button>
JS: 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);
}
});
I have searched other stack questions/answers and nothing has helped. 我搜索了其他堆栈问题/答案，没有任何帮助。
This confirms in the console that it is in fact changing the toggle state (toggle === true || toggle === false), but not changing the class. 这在控制台中确认它实际上正在改变切换状态（toggle === true || toggle === false），但不更改类。
Demo: 演示：
// 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>
Any help is greatly appreciated! 任何帮助是极大的赞赏！
1 个解决方案
解决方案1
3 已采纳 2018-05-31 03:57:09
Because you're using FA icon as JS, the icon will be rendered as SVG format. 因为您使用FA图标作为JS，图标将呈现为SVG格式。 So SVG is not a normal element as you expected and effect in Angular functionalities. 因此，SVG不是您在Angular功能中所期望和影响的正常元素。 You should try another way to handle this. 你应该尝试另一种方法来处理这个问题。 Please check my code snippet bellow: 请查看下面的代码片段：
// 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.