Discussion :

[dukoid]

Bonjour les amis,


j'ai mis en place un select jQuery.
le but étant exécuter cette commande jQuery :

Code :

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

1
2
 
$('*.select-cart').select2();

afin que tous les select soit redesigné par cette fontion jQuery.


il faut donc que le rendu de la page soit terminé et ensuite executer la commande jQuery.
seulement en AngularJs j'ai des soucis.


j'ai vu qu'on pouvait faire appel à une directive... voici les codes sources.

app.js

Code :

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

1
2
3
4
5
6
7
8
starter.directive('emitLastRepeaterElement', function() {
    return function(scope) {
        if (scope.$last){
            scope.$emit('LastRepeaterElement');
        }
    };
});

products.html

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div ng-repeat="product in ctrl.products  emit-last-repeater-element>
                    <a class="list-group-item" href="#/detail/{{product.id}}">
                        <div class="row">
...
...
                            <div class="col-md-12">
                                <ngcart-addtocart id="{{ product.id }}" name="{{ product.nom }}" price="{{ product.prix }}" quantity="1" quantity-max="30" data="product"></ngcart-addtocart>
                            </div>
                        </div>
                    </a>
                </div>

productCtrl.js

Code :

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

1
2
3
4
5
    $scope.$on('LastRepeaterElement', function(){
        $('*.select-cart').select2();
        console.log("ok enter!");
    });

"ok enter!" s'affiche bien dans la console -> mais les select ne sont pas pris en charge.

pour tester, j’exécute : $('*.select-cart').select2(); dans la console firebug et les select se redessine bien, c'est ok !


une idée ?

[Invité]

Normal, avec angularJs il vaut mieux utiliser des modules angularJs comme angular-ui-select pour faire des selects(Si tu veux des images dans les selects et un champs recherche, ce qui est bien cool ).

Ou vaut mieux même faire des selects tous simples avec un ng-repeat du style :

Code :

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

1
2
3
4
5
 
<select ng-model="monChoix" class="form-control">
	<option value="" >Choisir la station</option>
	<option ng-repeat="station in stations " value="{{::station.id}}">{{::station.nom}}</option> 
</select>

Je ne saurais pas expliquer le problème, mais certains "trucs" Jquery ne passent pas avec Angular, c'est au niveau du Dom...

[dukoid]

merci pour ces informations devwebsympa , t'es vraiment sympa

je vais donc utiliser angular-ui-select pour avoir de beau select

[Invité]

Seul Marco46 pourra décrire pourquoi cela ne fonctionne pas