AngularJS - Änderung des Attribut-Direktiven-Eingabewerts

Habe ich eine AngularJS-Attribut-Richtlinie, und ich möchte, um eine Aktion jederzeit übergeordneten input-Wert-änderungen. Jetzt mache ich es mit jQuery:

angular.module("myDirective", [])
.directive("myDirective", function()
{
    return {
        restrict: "A",
        scope:
        {
            myDirective: "=myDirective"
        },
        link: function(scope, element, attrs)
        {
            element.keypress(function()
            {
                //do stuff
            });
        }
    };
});

Gibt es eine Möglichkeit, dies zu tun, ohne jQuery? Ich finde das keyPress-Ereignis nicht zu tun genau das, was ich will, und während ich bin sicher, ich werde kommen mit einer Lösung, bekomme ich ein wenig nervös, wenn ich das resort auf die Verwendung von jQuery in eine Eckige Projekt.

Also, was ist die Winkelgeschwindigkeit Weg, dies zu tun?

InformationsquelleAutor der Frage Mike Pateras | 2013-04-30

  1. 61

    Gibt es ein tolles Beispiel in der AngularJS docs.

    Es ist sehr gut kommentiert und sollte Euch schon in die richtige Richtung.

    Einem einfachen Beispiel, vielleicht um so mehr, was Sie suchen, sind unten:

    jsfiddle

    HTML

    <div ng-app="myDirective" ng-controller="x">
    <input type="text" ng-model="test" my-directive>
</div>

    JavaScript

    angular.module('myDirective', [])
    .directive('myDirective', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch(attrs.ngModel, function (v) {
                console.log('value changed, new value is: ' + v);
            });
        }
    };
});

function x($scope) {
    $scope.test = 'value here';
}

    Edit: Gleiche Sache, erfordert nicht ngModel jsfiddle:

    JavaScript

    angular.module('myDirective', [])
    .directive('myDirective', function () {
    return {
        restrict: 'A',
        scope: {
            myDirective: '='
        },
        link: function (scope, element, attrs) {
            //set the initial value of the textbox
            element.val(scope.myDirective);
            element.data('old-value', scope.myDirective);

            //detect outside changes and update our input
            scope.$watch('myDirective', function (val) {
                element.val(scope.myDirective);
            });

            //on blur, update the value in scope
            element.bind('propertychange keyup paste', function (blurEvent) {
                if (element.data('old-value') != element.val()) {
                    console.log('value changed, new value is: ' + element.val());
                    scope.$apply(function () {
                        scope.myDirective = element.val();
                        element.data('old-value', element.val());
                    });
                }
            });
        }
    };
});

function x($scope) {
    $scope.test = 'value here';
}

    InformationsquelleAutor der Antwort Langdon

  2. 10

    Da diese muss haben ein input-element, wie ein Elternteil, Sie konnte einfach

    <input type="text" ng-model="foo" ng-change="myOnChangeFunction()">

    Alternativ können Sie die ngModelController und fügen Sie eine Funktion hinzu, um $formatters führt Funktionen Eingabe ändern. Sehen http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController

    .directive("myDirective", function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attr, ngModel) {
      ngModel.$formatters.push(function(value) {
        //Do stuff here, and return the formatted value.
      });
  };
};

    InformationsquelleAutor der Antwort Jmr

  3. 0

    Aufpassen, der Laufzeit änderungen im Wert einer benutzerdefinierten Richtlinie, verwenden Sie $observe Methode der attrs Objekt, anstatt $watch innerhalb einer benutzerdefinierten Richtlinie.
    Hier ist die Dokumentation für das gleiche ... $beobachten docs

    InformationsquelleAutor der Antwort Shivam

Schreibe einen Kommentar