Ionic 框架 - 输入输入时 Android 中的屏幕闪烁

Question

HTML部分

<ion-view  cache-view="false" view-title="" hide-nav-bar="true">
<ion-content class="padding input-center" style="background: url(img/background.jpg) center; background-size: cover;" ng-show="viewEntered">
<div class="row responsive-sm padding remvoeBP">
  <div class="col">
    <div class="app-logo"><img src="img/logo.png"></div> 

    <div class="row">
      <div class="col">
        <div class="row">
          <div class="col">
            <label class="item item-input" ng-hide="showCity" style="background-color:transparent; border:none; border-bottom:1px solid white;">
              <i class="icon ion-location placeholder-icon" style="color:black;"></i>
              <input type="text" placeholder="City" ng-change="searchCity(city_suggestion)" ng-model="city_suggestion">
            </label>

            <label class="item item-input" ng-show="showCity" style="background-color:transparent; border:none; border-bottom:1px solid white;">
              <i class="icon ion-location placeholder-icon" style="color:black;"></i>
              <input type="text" ng-click="changeCity()" ng-model="cityName">
            </label>

            <div ng-show="cityList" class="list">
              <li class="item" ng-click="selectedCity(city.city_id, city.name)" ng-repeat="city in searchCityList" >{{city.name}}</li>
              <input type="hidden" name="cityId" ng-value="cityId"/>
            </div>

          </div>
        </div>

        <div class="row">
          <div class="col" >
            <label class="item item-input" ng-hide="showArea" style="background-color:transparent; border:none; border-bottom:1px solid white;">     
              <i class="icon ion-android-navigate placeholder-icon" style="color:black;"></i>
              <input type="text" placeholder="Area" ng-change="searchArea(area_suggestion)" ng-model="area_suggestion">
            </label>

           <label class="item item-input" ng-show="showArea" style="background-color:transparent; border:none; border-bottom:1px solid white;">
              <i class="icon ion-android-navigate placeholder-icon" style="color:black;"></i>
             <input type="text" ng-click="changeArea()" ng-model="areaName">
           </label>

           <div ng-show="areaList" class="list">
             <li class="item" ng-click="selectedArea(area.area_id, area.name)" ng-repeat="area in searchAreaList">{{area.name}}</li>
           </div>

          </div>
        </div>

        <button class="button icon-left ion-android-search login-button-center" style="background-color:#AD1114;" ng-click="searchRestaurant(cityId,areaId)">
          Search
        </button>

      </div>
    </div>
  </div>
</div>

我的控制器代码

angular.module('starter.locationControllers', [])

.controller('LocationCtrl', function($scope, $state, $http, $ionicPopup, baseUrl, $ionicLoading) {

  $scope.$on("$ionicView.enter", function () { 
    $scope.viewEntered = true; 
  });
  $scope.$on("$ionicView.beforeLeave", function () { 
    $scope.viewEntered = false; 
  });

  $ionicLoading.show({
    template:'<div class="loader"><svg class="circular"><circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/></svg></div>'
  });

  $http({
method : "POST",
url : baseUrl+"user_id="+localStorage.getItem('user_id')+"&methodName=cart.clear"
   }).then(function mySucces(response) {

$ionicLoading.hide();

$scope.cityList = false;
$scope.showCity = false;
$scope.city_suggestion = '';
$scope.cityId = '';
$scope.areaId = '';

$scope.searchCity = function(city_suggestion) {
  $ionicLoading.show({
    template:'<div class="loader"><svg class="circular"><circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/></svg></div>'
  });

  $http.get(baseUrl+'methodName=city.suggestion&query='+city_suggestion, { cache: true}).then(function(response) {
    $ionicLoading.hide();
    $scope.cityList = true;
    $scope.searchCityList = response.data.responseMsg;
  });
};  

$scope.selectedCity = function(cityId, cityName) {
  $scope.showCity = true;
  $scope.cityList = false;
  $scope.cityName = cityName;
  $scope.cityId = cityId;
}

$scope.changeCity = function() {
  $scope.city_suggestion = {};
  $scope.cityName = {};
  $scope.showCity = false;
}

$scope.areaList = false;
$scope.showArea = false;
$scope.area_suggestion = '';

$scope.searchArea = function(area_suggestion) {

  $ionicLoading.show({
    template:'<div class="loader"><svg class="circular"><circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/></svg></div>'
  }); 

  $http.get(baseUrl+'methodName=area.suggestion&city_id='+$scope.cityId+'&query='+area_suggestion, { cache: true}).then(function(response) {
    $ionicLoading.hide();
    $scope.areaList = true;
    $scope.searchAreaList = response.data.responseMsg;
  });
};  

$scope.selectedArea = function(areaId, areaName) {
  $scope.showArea = true;
  $scope.areaList = false;
  $scope.areaName = areaName;
  $scope.areaId = areaId;
}

$scope.changeArea = function() {
  $scope.area_suggestion = {};
  $scope.areaName = {};
  $scope.showArea = false;
} 

$scope.searchRestaurant = function(cityId, areaId) {

  if(cityId == '') {
    var alertPopup = $ionicPopup.alert({
      title: 'Dear User',
      template: 'Please select city.'
    });

    return false;
  }

  if(areaId == '') {
    var alertPopup = $ionicPopup.alert({
    title: 'Dear User',
      template: 'Please select area.'
    });

    return false;
  }

  window.localStorage.removeItem("cityId");
  window.localStorage.removeItem("areaId");

  localStorage.setItem('cityId', cityId);
  localStorage.setItem('areaId', areaId);

  $state.go('restaurantList', {cityId: cityId, areaId:areaId});
}

});

});

系统信息

您的系统信息：

 ordova CLI: 6.4.0
 Ionic CLI Version: 2.1.13
 Ionic App Lib Version: 2.1.7
 ios-deploy version: Not installed
 ios-sim version: Not installed
 OS: Windows 10
 Node Version: v7.2.0
 Xcode version: Not installed 

我的应用程序屏幕在输入时闪烁。我参考了一些链接，但我仍然遇到这个问题。更多详情请点击https://www.youtube.com/watch?v=XGOrjMK6gmM&feature=youtu.be此处。

Answer 1

输入元素必须位于表单标签内，例如

<form id="calcForm" name="calcForm">
    ...... Input fields......
</form>

另外，不要在 ion-view 中将view-title留空。