web-dev-qa-db-fra.com

Exemple de travail des directives AngularJS et Bootstrap DatePicker?

J'ai vu une variété d'exemples de directives github, mais aucun ne comprend un JSFiddle en état de fonctionnement et je n'ai pas réussi à en faire fonctionner aucun. Surpris, ce n'est pas dans Angular-UI à ce stade.

javascripttwitter-bootstrapangularjs
22
brushleaf

veuillez consulter cette directive, un calendrier de travail fiddle : http://jsfiddle.net/nabeezy/HB7LU/209/

myApp.directive('calendar', function () {
            return {
                require: 'ngModel',
                link: function (scope, el, attr, ngModel) {
                    $(el).datepicker({
                        dateFormat: 'yy-mm-dd',
                        onSelect: function (dateText) {
                            scope.$apply(function () {
                                ngModel.$setViewValue(dateText);
                            });
                        }
                    });
                }
            };
        })
13
Joe Nabeezy

Disons que ceci est dans votre vue.html:

        <script type="text/javascript" src="js/bootstrap-datepicker.js"></script>
        <div id="datepicker"></div>
        <script type="text/javascript">
        $('#datepicker').datepicker().on('changeDate', function(ev){
          var element = angular.element($('#datepicker'));
          var controller = element.controller();
          var scope = element.scope();

          scope.$apply(function(){
            scope.doSomethingWithDate(ev.date);
          });
        });
        </script>

Et puis dans votre controller.js:

$scope.doSomethingWithDate = function (date){
  alert(date);
};

Ça y est, ça marche :)

6
LucasSeveryn

J'espère que cela aide, je cherchais un exemple simple, mais je ne pouvais pas le trouver, j'en ai trouvé un, mais plein de code et de liens et je l'ai nettoyé, voici l'exemple de travail le plus simple avec datepicker utilisant angular bootstrap:

---> exemple de page <---

4
Chris Rosete

S'il vous plait verifiez maintenant. Vous avez oublié d'y ajouter jquery et css.

Fiddle ici

0
Navyah