Mise à jour de ng-model dans une directive utilisant un template

J'ai une directive qui est instancié comme ceci:

<datepicker ng-model="foo"></datepicker>

À l'intérieur de la directive, le datepicker de la balise est remplacée par ce modèle:

template: '<div class="datepicker-wrapper input-append">' +
                     '<input type="text" class="datepicker" />' +
                     '<span class="add-on"><i class="icon-calendar"></i></span>' +
                   '</div>'

La valeur que je veux ng-model lié à la valeur du champ de saisie. Quelle est la meilleure façon d'aller à ce sujet donc je maintiens les deux sens de la liaison de données de ng-model?

source d'informationauteur Dustin

  1. 32

    Selon la complexité de votre passthrough est, vous pouvez simplement utiliser l' = faire une bidirectionnel lier entre un nom local et ngModel, comme dans ce violon:

    http://jsfiddle.net/mThrT/22/

    J'ai eu un sacré bout de temps la mise en place du violon pour une raison quelconque (première fois d'essayer angulaire) mais voici le money shot:

    template: '<div class="datepicker-wrapper input-append">' 
        + '<input type="text" class="datepicker" ng-model="bar" />' 
        + '<span class="add-on"><i class="icon-calendar"></i></span>' 
        + '</div>',
scope: {
    bar: '=ngModel'
},
  2. 10

    Il ya quelques façons de le faire..

    Il y a une fonction sur le ctrl paramètre de la fonction de liaison appelé .$setViewValue(valueHere) que vous pouvez utiliser pour définir la valeur de ce que ngModel est le référencement. Il va faire le travail de mise en choses de dollars sale etc. Il y a aussi une propriété appelée .$viewValue vous pouvez utiliser pour obtenir la valeur actuelle. De sorte que vous pouvez mettre en place un $regarder sur un isolat champ d'application de la propriété de mettre à jour le ngModel valeurs.

    La plus juste façon de le faire serait encore à la fonction de liaison, mais il ressemble à:

    app.directive('myDirective', function() {
    restrict: 'E',
    require: 'ngModel',
    scope: {}, //isolate the scope
    template: '<div class="datepicker-wrapper input-append">' +
                         '<input type="text" class="datepicker" ng-model="date" />' +
                         '<span class="add-on"><i class="icon-calendar"></i></span>' +
                       '</div>',
    controller: function($scope) { 
    },
    link: function(scope, elem, attr, ctrl) {
       //get the value from ngModel
       scope.date = ctrl.$viewValue;

       //set the value of ngModel when the local date property changes
       scope.$watch('date', function(value) {
           if(ctrl.$viewValue != value) {
              ctrl.$setViewValue(value);
           }
       });
    }
});