Question

我正在使用html5离子框架。在Chrome（桌面浏览器测试）上，当我喜欢内心时，颜色从灰色变为红色，当我再次点击它时，它会从红色变为灰色（切换工作）。在模拟的iOS设备和我的Android上，我可以将按钮颜色更改为红色，但是一旦我再次点击它就不会变回灰色。

home.html的

<ion-view view-title="My Page"
<ion-content class="has-twoheaders">
  <div class="list card">
<div class="item item-body">
<p>
  This is a Card. The header is created from a Thumbnail List item,
  the content is from a card-body consisting of an image and paragraph text. The footer
  consists of tabs, icons aligned left, within the card-footer.
</p>
<p><a ng-click="like()" class="button button-icon heart" ng-class='{liked:liked}'>
<i class="icon ion-heart"></i></a></p>
 </div></div></ion-content>
</ion-view>

的index.html

<!DOCTYPE html><html><head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="css/animate.css" rel="stylesheet">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/main.js"></script>
</head>
<body ng-app="starter" >
<ion-nav-view></ion-nav-view>
</body>

</html>

main.js（home.html使用ArticleCtrl控制器）

function ArticleCtrl($s,$st,$http) {
  $s.num1 = 0;
  $s.liked = false;
  $s.like = function() {
    if ($s.liked == false) {
       $s.liked = true;
       console.log("Now True");
    } else {
      $s.liked = false;
      console.log("Now False");
    }
   }
angular.module("article",[])
.controller('ArticleCtrl',['$scope','$state','$http', ArticleCtrl])

style.css

.heart {
   color: grey;
   font-size: 27px;

}

.liked {
  color: red;
}

这是chrome检查器上的输出。正如您所看到的，“Now True”和“Now False”切换在移动设备上工作，但红色不会变回灰色。提前谢谢！

Ionic：Web浏览器上呈现的页面与模拟设备上的页面不同

0 个答案: