Discussion :

[rioll]

Bonjour,

Je développe une application avec angularJS, Bootstrap et je build avec Grunt/Cordova.

Il se trouve que lors de la génération, j'ai plusieurs dysfonctionnements dont tout mes ng-if !

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<section id="omega1" ng-if="omega1">	
 
	<div class="col-xs-12">
	<img src="images/quete/Quete1/omega/1.jpg" class="img-responsive"> 
	<a href ="#carte"><img src="images/quete/Quete1/bouton/croix.svg" class="croix"></a>
	<img src="images/quete/Quete1/bouton/flecheD.svg" class="fleche" ng-click="queteOmegaA()">
	</div>
 
</section>
 
 
<section id="omega2" ng-if="omega2">
 
	<div class="col-xs-12">
	<img src="images/quete/Quete1/omega/2.jpg" class="img-responsive">
	<a href ="#carte"><img src="images/quete/Quete1/bouton/croix.svg" class="croix"></a>
	<img src="images/quete/Quete1/bouton/flecheD.svg" class="fleche" ng-click="queteOmegaB()">		
	</div>
 
 
</section>

Tout simplement j'ai des div retirés du DOM et lors d'un clic sur un bouton j'exécute une fonction qui passe le false à true etc. Dans mon controlleur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$scope.queteOmegaA = function(){
 
	$scope.omega1 = false;     			
	$scope.omega2 = true;				
 
};;

Cela marche parfaitement sur desktop mais pas sur mobile android.
J'ai essayé de mettre ng-show, pour le coup j'ai toutes les div d'affichées, peu importe les conditions... (de plus j'ai vraiment besoin de retirer du DOM les div et pas seulement de les cacher).

Si quelqu'un a déjà eu se problème avec ng if et ngshow qui ne se comporte pas comme on le veut sur android,

Merci.

[Marco46]

J'ai déjà passé une webapp sous cordova et je me souviens pas d'un tel problème.

Par contre le fait d'utiliser des variables primaires dans le scope sans passer par un objet complexe peut poser de multiples soucis sur les héritages de scope.

Donc au lieu de faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
$scope.queteOmegaA = function(){
 
	$scope.omega1 = false;     			
	$scope.omega2 = true;				
 
};;

Fait plutôt :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
$scope.queteOmegaA = function(){
 
	$scope.omega.prop1 = false;     			
	$scope.omega.prop2 = true;				
 
};;

Et du coup ton template devient :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<section id="omega1" ng-if="omega.prop1">	
 
	<div class="col-xs-12">
	<img src="images/quete/Quete1/omega/1.jpg" class="img-responsive"> 
	<a href ="#carte"><img src="images/quete/Quete1/bouton/croix.svg" class="croix"></a>
	<img src="images/quete/Quete1/bouton/flecheD.svg" class="fleche" ng-click="queteOmegaA()">
	</div>
 
</section>
 
 
<section id="omega2" ng-if="omega.prop2">
 
	<div class="col-xs-12">
	<img src="images/quete/Quete1/omega/2.jpg" class="img-responsive">
	<a href ="#carte"><img src="images/quete/Quete1/bouton/croix.svg" class="croix"></a>
	<img src="images/quete/Quete1/bouton/flecheD.svg" class="fleche" ng-click="queteOmegaB()">		
	</div>
 
 
</section>