Javascript Ionic framework ionicView.entered事件触发两次
我正在玩这个ionicView事件,每当视图激活时就会触发这些事件,并且我正在使用侧菜单模板,您可以在创建项目时重复使用该模板。似乎如果我将$ionicView.entered事件的侦听器放在AppCtrl(侧菜单模板使用的侦听器,属于ui路由器配置中的抽象状态)中,任何子视图都会在一行中调用它两次(例如,将app.someotherview用作状态时) 我不知道这是否是预期的行为,因为从文档中可以看出,无论我是否更改子视图(menuContent视图),它都只会触发一次 我想知道这是否是预期的行为,如果是,如何让事件在每次显示侧菜单模板时只触发一次 这是我写的: 这来自应用程序模块:Javascript Ionic framework ionicView.entered事件触发两次,javascript,angular-ui-router,ionic-framework,Javascript,Angular Ui Router,Ionic Framework,我正在玩这个ionicView事件,每当视图激活时就会触发这些事件,并且我正在使用侧菜单模板,您可以在创建项目时重复使用该模板。似乎如果我将$ionicView.entered事件的侦听器放在AppCtrl(侧菜单模板使用的侦听器,属于ui路由器配置中的抽象状态)中,任何子视图都会在一行中调用它两次(例如,将app.someotherview用作状态时) 我不知道这是否是预期的行为,因为从文档中可以看出,无论我是否更改子视图(menuContent视图),它都只会触发一次 我想知道这是否是预期的
.config(function($stateProvider, $urlRouterProvider, $httpProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.overview', {
url: "/overview",
views: {
'menuContent': {
templateUrl: "templates/overview.html",
controller: 'OverviewCtrl'
}
}
})
.state('login', {
url: "/login",
templateUrl: "templates/identificationscreen.html",
controller: "IdentificationCtrl"
})
.state('app.agenda', {
url: "/agenda",
views: {
'menuContent': {
templateUrl: "templates/agenda.html",
controller: 'AgendaCtrl'
}
}
});
$httpProvider.interceptors.push('credentialsInjector');
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
那么AppCtrl是这样的:
angular.module('dashboard.controllers.app', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout, $ionicSideMenuDelegate, authService, $state) {
$scope.logout = function() {
authService.logout();
$state.go('login');
};
$scope.$on('$ionicView.enter', function(){ //This is fired twice in a row
console.log("App view (menu) entered.");
console.log(arguments);
});
$scope.$on('$ionicView.leave', function(){ //This just one when leaving, which happens when I logout
console.log("App view (menu) leaved.");
console.log(arguments);
});
});
菜单模板:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content edge-drag-threshold="true">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">APPoint!</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item nav-clear menu-close href="#/app/overview">
Overview
</ion-item>
<ion-item nav-clear menu-close href="#/app/agenda">
Agenda
</ion-item>
<ion-item nav-clear menu-close ng-click="logout()">
Logout
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<ion-view view-title="Avatar » Instruments" ng-controller="AvatarInstrumentsCtrl as vm">
任命!
概述
议程
注销
尝试$ionicView。输入后
。对我来说只有一次。
您可以通过以下操作全局禁用ionic使用的缓存机制:
$ionicConfigProvider.views.maxCache(0);
不过我自己还没试过
否则,对我来说最好的办法就是
$scope.$on("$ionicView.afterLeave", function () {
$ionicHistory.clearCache();
});
这是为了在离开视图之前清除缓存,以便在每次再次返回时重新运行控制器 我发现模拟OneNet事件的最佳选择是使用视图控制器:
$scope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
if (toState.name == "stateName")
doSomething();
}
一个简单的解决方法是:
$scope.$on('$ionicView.enter', function(ev) {
if(ev.targetScope !== $scope)
return;
// Your code which should only run once
});
起初我使用了,但注意到在我的例子中,这只是一个根本问题的症状,因为这不会发生在所有控制器上,只有这个控制器
就我而言,这是因为我想
我在模板中添加了controllera
:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content edge-drag-threshold="true">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">APPoint!</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item nav-clear menu-close href="#/app/overview">
Overview
</ion-item>
<ion-item nav-clear menu-close href="#/app/agenda">
Agenda
</ion-item>
<ion-item nav-clear menu-close ng-click="logout()">
Logout
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<ion-view view-title="Avatar » Instruments" ng-controller="AvatarInstrumentsCtrl as vm">
因此,在我的案例中,解决方案是:
.state('app.avatar-instruments', {
url: "/avatar/instruments",
views: {
'menuContent': {
templateUrl: "templates/avatar/instruments.html"
}
}
})
@安德里安,你有这个问题的解决方案吗?谢谢,这很有效。但我现在想知道为什么会这样。特别是,
ev.targetScope.id===$scope.id
即使ev.targetScope!==$范围
!