Aktualisierung ng-model innerhalb einer Richtlinie, die mithilfe einer Vorlage

Ich habe eine Richtlinie, die instanziiert wird, wie diese:

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

Innerhalb der Richtlinie, die datepicker-tag ersetzt wird durch diese Vorlage:

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

Den Wert, ich will das ng-Modell gebunden ist, den Wert aus dem Eingabefeld aus. Was ist der beste Weg zu gehen, so halte ich die zwei-Wege-Datenbindung von ng-model?

InformationsquelleAutor der Frage Dustin | 2012-10-22

  1. 32

    Je nachdem, wie kompliziert Ihr passthrough ist, können Sie einfach die = Umfang zu tun, eine bidirektionale Bindung zwischen einem lokalen Namen und ngModel, wie in diesem fiddle:

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

    Ich hatte eine Hölle von einer Zeit, die Einrichtung der Geige für einige Grund (zum ersten mal versuchen, mit Winkel -) aber hier ist der 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'
},

    InformationsquelleAutor der Antwort Drew Miller

  2. 10

    Gibt es ein paar Möglichkeiten, dies zu tun..

    Gibt es eine Funktion, auf die ctrl parameter der linking-Funktion genannt .$setViewValue(valueHere)die Sie verwenden können, um den Wert von was auch immer ngModel auf als gut. Es wird die Arbeit der Einrichtung Dinge $dirty etc. Es ist auch eine Eigenschaft namens .$viewValue Sie verwenden können, um den aktuellen Wert. So können Sie ein $ - Uhr auf ein Isolat scope-Eigenschaft zu aktualisieren, die ngModel Werte.

    Der richtige Weg, dies zu tun wäre noch in der verknüpfen-Funktion, aber es würde ungefähr so Aussehen:

    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);
           }
       });
    }
});

    InformationsquelleAutor der Antwort Ben Lesh

Schreibe einen Kommentar