AngularJS Toggling fontAwesome класс по щелчку мышью - PullRequest
Новая
       9

AngularJS Toggling fontAwesome класс по щелчку мышью

0 голосов
/ 31 мая 2018

Я пытаюсь изменить класс элемента, созданного с помощью библиотеки шрифтов awesome.По сути, я хочу, чтобы при начальной загрузке сердце не было заполнено и иметь класс - «далеко», затем при нажатии кнопки я хочу, чтобы сердце изменилось на класс, который наполняет сердце - «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>

Любая помощь с благодарностью!

1 Ответ

0 голосов
/ 31 мая 2018

Поскольку вы используете иконку FA в качестве JS, иконка будет отображаться в формате SVG.Так что SVG не является нормальным элементом, как вы ожидали, и влияет на угловые функции.Вы должны попробовать другой способ справиться с этим.Пожалуйста, проверьте мой фрагмент кода ниже: 

// 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>
...