我有一个带有按钮的搜索栏,每次你专注于搜索栏时都必须显示该按钮,以便你理解I record this video,你可以在屏幕的右上角看到我提到的行为在这个问题上,就在日志记录之后,您会看到一个按钮"取消",然后我刷新页面大约3次,以便您看到相同的情况发生,最后您将看到该点击在取消和按钮大约需要2秒钟消失,它必须立即消失。
请查看我的代码并告诉我发生了什么,请
<div class="bar-subheader">
<label>
<input type="text"
ng-model="query"
ng-focus="showInput = true"
ng-blur="showInput = false">
</label>
<!-- this is the cancel button -->
<button class="button-clear"
ng-show="showInput"
ng-click="query = null">
Cancel
</button>
</div>
更新
对于移动应用来说,这是带有Ionic的Angular
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.login', {
url:'/login',
views:{
menuContent:{
templateUrl:'templates/login.html',
controller:'AuthController'
}
}
})
//THIS IS THE ONE YOU ASKED ME.
.state('app.sports', {
url:'/sports',
views:{
menuContent:{
templateUrl:'templates/sportsList.html',
controller:'SportsController'
}
}
})
这里是控制者
'use strict';
angular.module('capilleira.clickAndGambleMobile')
.controller('SportsController', function($scope, $state, $ionicModal, $ionicLoading,
AuthFactory, SportsFactory) {
$scope.sports = [];
$scope.customer = {};
$ionicLoading.show({
template: 'Loading Sports...<br><div class="button-icon icon ion-loading-d"></div>'
});
AuthFactory.getCustomer().then(function(customer) {
$scope.customer = customer;
SportsFactory.getSportsWithLeagues(customer).then(function(sports) {
$ionicLoading.hide();
if (sports.length) {
$scope.sports = sports;
}else {
AuthFactory.logout();
}
}, function(err) {
$ionicLoading.hide();
console.log(err);
});
}, function(err) {
$ionicLoading.hide();
$state.go('app.login');
console.log(err);
});
$ionicModal.fromTemplateUrl('templates/sportSelectionModal.html', {
scope: $scope,
animation: 'slide-in-right'
}).then(function(modal) {
$scope.sportSelectionModal = modal;
});
$scope.displaySportSelectionModal = function() {
$scope.sportSelectionModal.show();
};
$scope.closeSportSelectionModal = function() {
$scope.sportSelectionModal.hide();
};
$scope.isSportShown = function(sport) {
return $scope.shownSport === sport;
};
$scope.goToLines = function(league) {
var linesParameters = {
customerId: $scope.customer.customer,
top: 10,
familyGameId: -1,
games: -1,
sports: league.sport.id,
leagues: league.id,
periods: league.lineType,
part: league.part
};
$state.transitionTo('app.lines', linesParameters);
};
});
答案 0 :(得分:0)
我不确定为什么需要这么长时间,但要检查这两个小提琴,它们可以毫无问题地工作
<div ng-app="myApp">
<div ng-controller="myController as vm">
<input type="text"
ng-model="vm.query"
ng-focus="vm.showInput = true"
ng-blur="vm.showInput = false" />
<button class="button-clear"
ng-show="vm.showInput || vm.query"
ng-click="vm.query = null">
Cancel
</button>
</div>
</div>
var app = angular.module('myApp', []);
app.controller('myController', myController);
function myController(){
var vm = this;
vm.query;
vm.showInput = false;
}
您也可以使用Fastclick.js或ngTouch
这个其他版本依赖于查询来隐藏/显示 http://jsfiddle.net/cmu8544a/3/