在页面加载和刷新之前显示的内容,AngularJS

时间:2015-01-29 22:42:55

标签: angularjs

我有一个带有按钮的搜索栏,每次你专注于搜索栏时都必须显示该按钮,以便你理解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);
    };
  });

1 个答案:

答案 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;
}

http://jsfiddle.net/cmu8544a/

您也可以使用Fastclick.js或ngTouch

这个其他版本依赖于查询来隐藏/显示 http://jsfiddle.net/cmu8544a/3/