Angularjs simple datepicker à l'aide du contrôleur de ne pas $portée

Je suis en train d'utiliser le angular-ui bootstrap pour dateranges.

http://angular-ui.github.io/bootstrap/#/datepicker

Le lien contient quelques bons exemples. Cependant je veux utiliser controller as de la syntaxe et de ne pas la portée qu'il montre dans le lien ci-dessus.

J'ai essayé, comme vu ci-dessous. Mais il n'affiche pas la boîte du calendrier lors de son cliqué sur. Ses pas le retour des erreurs, de sorte que je suis un peu perdu sur ce que je dois faire. Je pense que mon exemple est proche.

Voici ma tentative sur violon

Des extraits de Code ci-dessous..

js_file.js

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function() {

  self = this;
  self.someProp = 'Check This value displays.. confirms controller initalised'

  self.opened = {};
  self.open = function($event) {

    $event.preventDefault();
    $event.stopPropagation();

    self.opened = {};
    self.opened[$event.target.id] = true;

    //log this to check if its setting the log    
    console.log(self.opened);

  };

  self.format = 'dd-MM-yyyy'
});

index.html

<body>
<div ng-controller="DatepickerDemoCtrl as demo">
<style>
  #dateFrom, #dateTo { width: 200px;}
</style>

  {{ demo.someProp }}

  <div class="form-group">

      <div class="input-group">

          <input type="text" 
            class="form-control date" 
            id="dateFrom" 
            placeholder="From" 
            ng-click="demo.open($event)"   
            datepicker-popup="{{demo.format}}" 
            ng-model="demo.dtFrom" 
            is-open="demo.dateFrom" 
            min-date="minDate" 
            max-date="'2015-06-22'" 
            datepicker-options="dateOptions" 
            date-disabled="disabled(date, mode)" 
            ng-required="true" 
            close-text="Close" >


          <input type="text" 
            class="form-control date" 
            id="dateTo"   
            placeholder="To" 
            ng-click="demo.open($event)"  
            datepicker-popup="{{demo.format}}" 
            ng-model="demo.dtTo" 
            is-open="demo.dateTo" 
            min-date="minDate" 
            max-date="'2015-06-22'" 
            datepicker-options="dateOptions" 
            date-disabled="disabled(date, mode)" 
            ng-required="true" 
            close-text="Close" >

      </div>

  </div>

</div>
</body>
  • Si vous voyez le code d'clairement l'exemple de "bootstrap" est également à l'aide du contrôleur lui-même...dans le contrôleur ils sont à l'aide de la portée de la directive. angulaire.module (interface utilisateur.bootstrap.la démo).contrôleur('DatepickerDemoCtrl', function ($champ) {
  • Je suis en train de le faire sans le champ d'application de la directive à l'aide du nouveau contrôleur façon.
InformationsquelleAutor Robbo_UK | 2015-01-27
  1. 6

    Le problème semble être ici que depuis l'INTERFACE utilisateur de Bootstrap 0.11.0 ils ont enlevé l'ouvrir sur l'objet". (voir la source)

    La plunkr ci-dessous montre une solution de contournement possible à l'aide de ng-cliquez pour ouvrir le sélecteur de date.

    changer votre ng-clic à partir de la dateFrom entrée:

    ng-click="demo.dateFrom=true"

    et le champ de saisie pour dateTo à:

    ng-click="demo.dateTo=true"

    Plunkr - Travail Bootstrap Date-picker

    La source ci-dessous montre plusieurs autres solutions de contournement si vous êtes à la recherche d'une solution qui ouvre le sélecteur de date sur l'accent, plutôt que d'utiliser ng-click.

    Source: UI Bootstrap Github

    • Merci cela fonctionne :-). Je vais d'attribution de la prime il y a un temps de retard gauche de 5 heures avant que je puisse le faire.
    InformationsquelleAutor rmuller