Discussion :

[clem_alain]

Bonjour,

Je tente d'utiliser un datepicker dans une (petite) application AngularJs, mais lorsque je clique sur l'icone, rien ne se passe, pourtant je passe bien dans la fonction associée au clic.
Il doit y avoir une erreur quelque part, mais où ?

Précision, j'ai fait fonctionner la démo présentée là : https://angular-ui.github.io/bootstrap/
Voici mon environnement.

Une copie d'écran :


Les référencement des scripts et css dans index.html :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
        <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet"> 
         <link href="lib/css/employees.css" rel="stylesheet">       
        <script type="text/javascript" src="lib/angular/angular.js"></script>
 
        <script src="lib/jquery/jquery-2.1.3.min.js"></script>     
        <script src="lib/bootstrap/js/bootstrap.min.js"></script> 
        <script src="lib/bootstrap/js/ui-bootstrap-tpls.js" type="text/javascript"></script>
 
        <script type="text/javascript" src="lib/angular/angular-resource.js"></script> 
        <script type="text/javascript" src="lib/angular/angular-route.js"></script>
        <script type="text/javascript" src="script/app.js"></script>
        <script type="text/javascript" src="script/services.js"></script>          
        <script type="text/javascript" src="script/controllers.js"></script>

Remarque : on est sur la version 1.4.5 d'angularjs et 3.2.0 pour bootstrap.

Le code du contrôleur :

Code :

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
controllers.controller('employeeCtrl', ['$route', 'EmployeesRest', '$routeParams', '$location', function ($route, EmployeesRest, $routeParams, $location) {
        var vm = this;
        vm.pageTitle = " an Employee";
        vm.employee_id = $routeParams.id;
        if (vm.employee_id)
            vm.pageTitle = "Updating" + vm.pageTitle;
        else
            vm.pageTitle = "Adding" + vm.pageTitle;
        vm.Dateformat = 'yyyy-MM-dd';
        vm.datePickerOpened = false;
        vm.openDatePicker = function() {
            vm.datePickerOpened = true;    
        };
        EmployeesRest.getDepartments().success(function (data) {
            vm.departments = data;
        });
        EmployeesRest.getJobs().success(function (data) {
            vm.jobs = data;
        });
       . . .

Le template employee.html :

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
23
24
25
26
<div class="well">
    <div class="text-center titre">
        <h2>{{vm.pageTitle}}</h2>
    </div>
    <form class="form-horizontal" role="form" >
 
        <div class="form-group">
            <label class="col-sm-3 control-label">Name : </label>
            <div class="col-sm-6  col-md-5">
                <input type="text" name="name" ng-model="vm.employee.name" class="form-control" placeholder="Employee's name" required autofocus>
            </div>
        </div>
        . . .
        <div class="form-group">
            <label class="col-sm-3 control-label">Hire Date : </label>
            <div class="col-sm-6 col-md-2">   
                <p class="input-group">
                    <input type="text" class="form-control" is-open="vm.datePickerOpened" datepicker-popup="yyyy-MM-dd" 
                           ng-model="vm.employee.hiredate" ng-required="true"  close-text="Close" />                 
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default" ng-click="vm.openDatePicker()"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>   
                </p>
            </div>
        </div>  
        . . .

[slim]

Bonjour,

Tu passe bien par la fonction ?

Code :

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

1
2
3
vm.openDatePicker = function() {
    vm.datePickerOpened = true;    
};

As-tu une erreur dans la console ?

[clem_alain]

Bonjour,
Oui je passe bien dans la fonction, j'ai vérifié en faisant du pas à pas et non, je n'ai aucune erreur dans la console.

[slim]

Puisqu'on ne peut pas voir exactement ton contexte d'exécution, je pense pas qu'on puisse savoir exactement pourquoi isOpen ne vaut pas true...
D'ailleurs, si tu pouvais créer un plunker ou un jsFiddle pour y mettre ton code...
Sinon, mets des points d'arret sur les lignes (et autour...) contenant l'affectation de la var isOpen et analyse la. La variable est dans la directive datepicker de bootstrap (fichier datepicker.js).

[clem_alain]

Bonjour,
J'ai construit une page minimale et j'ai comparé avec le code de la démo.
Je pense avoir fini par trouver, il faut injecter ngAnimate et ui-bootstrap, ce que je ne faisais pas :

Code :

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

var app = angular.module('app', ['ngRoute', 'ngResource', 'ngAnimate', 'ui.bootstrap','controllers', 'services']);

Merci pour la réponse