Angular-UI plusieurs datepickers initié forme contrôleur

Je suis entrain de créer un formulaire avec plusieurs angular-ui datepickers et des données d'entrée.
Pour le datepickers j'ai créé un contrôleur et un formulaire parent contrôleur comme l'exemple donné ci-dessous. La forme contrôleur a le modèle qui comprend le datepicker dates.

JS:

var app = angular.module('app', ['ui.bootstrap']);

app.controller('dateCntrl', function($scope,$timeout){
    $scope.open = function() {
        $timeout(function() {
            $scope.opened = true;
        });
    };
});

app.controller('formCntrl', function($scope, $http){
    $scope.model = {name:'', startDate:'', endDate:''};
});

HTML:

<form ng-controller="formCntrl">
    <input type="text" id="name" placeholder="Name" ng-model="model.name" />
    <div ng-controller="dateCntrl">
        <input datepicker-popup="dd-MMMM-yyyy"  ng-model="model.startDate" id="startDate" type="text" />
        <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
    </div>
    <div ng-controller="dateCntrl">
        <input datepicker-popup="dd-MMMM-yyyy" ng-model="model.endDate" id="endDate" type="text" />
        <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
    </div>
</form>

Suis-je dans la bonne voie en ayant un contrôleur pour le datepicker. Ceci agira comme un contrôleur commun pour l'ensemble de la date d'entrées
Si oui, est-il possible d'avoir un moyen générique de liaison de données dans le datepicker contrôleur vers le modèle des dates(de modèle.startDate,modèle.date de fin dans ce cas) dans le contrôleur de parent.
Est là une autre façon d'aller à ce sujet.

Merci et salutations.

OriginalL'auteur guru | 2013-08-16

angular-ui angularjs

Devrait avoir lu plus au sujet de la la portée de l'héritage

Le parent valeurs de portée peut être consulté à l'aide de $parent

<form ng-controller="formCntrl">
    <input type="text" id="name" placeholder="Name" ng-model="model.name" />
    <div ng-controller="dateCntrl">
        <input datepicker-popup="dd-MMMM-yyyy"  ng-model="$parent.model.startDate" id="startDate" type="text" />
        <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
    </div>
    <div ng-controller="dateCntrl">
        <input datepicker-popup="dd-MMMM-yyyy" ng-model="$parent.model.endDate" id="endDate" type="text" />
        <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
    </div>
</form>

Merci, cela m'a aidé deux sélecteurs, où l'ouverture en même temps .. pour moi c'est: $parent.date de début (d'ailleurs vous n'avez en fait besoin d'utiliser ng-controller/$parent sur l'un des 2 sélecteurs de sorte qu'ils n'interfèrent pas avec l'autre ..mais je suppose que la lisibilité-sage, il est probablement préférable d'annoter les deux)

OriginalL'auteur guru

J'ai pris tout le code de l'exemple détaillé ici: http://angular-ui.github.io/bootstrap/#/datepicker & enveloppé dans ma propre directive. De cette façon, je peux tomber juste illimité datepickers dans ma page, et de préciser le modèle pour chacun de se lier à. Je n'ai pas à gérer le passage répétitif des paramètres, ou la mise en place des variables uniques pour le suivi de l "ouvrir" le statut de plus, je viens de mettre 1 ligne de code:

<div my-date-picker my-date-picker-model="myDate1"></div>
<div my-date-picker my-date-picker-model="myDate2"></div>
<div my-date-picker my-date-picker-model="myDate3"></div>

L'utilisateur peut ensuite activer chaque sélecteur de date d'ouverture/de fermeture, et les valeurs seront mises à jour dans myDate1, myDate2, & myDate3 de façon appropriée. Le statut ouvert/fermé est encapsulée à l'intérieur de la directive, et de l'esprit.

Pour mettre en œuvre la directive, j'ai copié le 'JS' onglet du code du contrôleur, et j'ai copié le "Balisage" tab " du code du modèle. À la fin, j'ai ajouté 1 bit de code pour mettre à jour la valeur de la portée parent:

$scope.$watch('dt', function(newVal, oldVal) {
    $scope.myDatePickerModel = newVal;
});

Au début de la manette, j'ai changé de $champ d'application.aujourd'hui, pour initialiser la valeur de la portée parent, au lieu d'utiliser l'horloge système:

$scope.init = function() {
    $scope.dt = $scope.hxDatePickerModel;
};
$scope.init();

La directive utilise un isolat portée, et 2 voies de liaison sur l'attribut qui définit la portée parent du modèle:

scope: {
    myDatePickerModel: '='
}

Voici le code complet de la directive:

app.directive('myDatePicker', function() {
function link(scope, element, attrs) {
}
function controller($scope) {
$scope.init = function() {
$scope.dt = $scope.myDatePickerModel;
};
$scope.init();
$scope.clear = function () {
$scope.dt = null;
};
//Disable weekend selection
$scope.disabled = function(date, mode) {
return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
};
$scope.toggleMin = function() {
$scope.minDate = $scope.minDate ? null : new Date();
};
$scope.toggleMin();
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
$scope.$watch('dt', function(newVal, oldVal) {
$scope.myDatePickerModel = newVal;
});
}
return {
restrict: 'A',
templateUrl: 'datepicker.html',
link: link,
controller: controller,
scope: {
myDatePickerModel: '='
}
}
});

Et voici le code complet de datepicker.html, le modèle de cette directive:

<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>

J'utilise la directive en droit maintenant, il fonctionne comme un charme. Cependant, je ne suis pas en mesure d'effacer la date sélectionnée à partir de la vue-contrôleur (le point de vue où la directive est utilisée). Toute suggestion?

OriginalL'auteur Josh Ribakoff

autre solution , déclarer le datepicker de la méthode open() de $rootScope et il est disponible toute l'application .

Html :

<div ng-app="myApp">
<div ng-controller="DemoController">
<div> 
<input  type="text" name="salesEndDate" id = "salesEndDate"   datepicker-popup="dd-MM-yyyy"  ng-model="salesEndDate" datepicker-options="dateOptions"/>
<button id="salesEndDateCal" ng-click="datePickerOpen('salesEndDate')"><i class="icon-calendar"></i></button> 
</div>
<div>
<input  type="text" name="salesStartDate" id = "salesStartDate"   datepicker-popup="dd-MM-yyyy"  ng-model="salesStartDate"  datepicker-options="dateOptions"/>
<button id="salesEndDateCal" ng-click="datePickerOpen('salesStartDate')"><i class="icon-calendar"></i></button> 
</div>
</div>
</div>

Javascript :

var myApp = angular.module('myApp',['ui.bootstrap','ui.bootstrap.datepicker']);
function DemoController($scope,$timeout,$rootScope) { 
$rootScope.datePickerOpen = function(id) {
$timeout(function() {
$("#"+id).focus(); 
});      
};
}

jsfiddle lien http://jsfiddle.net/angles_k/s7yZm/21/

OriginalL'auteur AKA

Vous devez vous connecter pour publier un commentaire.