jquery - crear - directivas personalizadas angularjs

AngularJS-Cambio de valor de entrada de directiva de atributo

Question

Tengo una directiva de atributos AngularJS, y me gustaría realizar una acción cada vez que cambie el valor de la entrada principal. Ahora mismo lo estoy haciendo con jQuery:

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

¿Hay una manera de hacer esto sin jQuery? Estoy encontrando que el evento keyPress no está haciendo exactamente lo que quiero, y aunque estoy seguro de que encontraré una solución, me pongo un poco nervioso cuando recurro a usar jQuery en un proyecto Angular.

Entonces, ¿cuál es la forma angular de hacer esto?

Answer 1

Hay un gran ejemplo en los documentos de AngularJS .

Está muy bien comentado y debería apuntarle en la dirección correcta.

Un ejemplo simple, tal vez más de lo que está buscando es a continuación:

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

Edición: Lo mismo, no requiere 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'';
}

Answer 2

Para vigilar los cambios de tiempo de ejecución en el valor de una directiva personalizada, use el método $observe del objeto attrs , en lugar de poner $watch dentro de una directiva personalizada. Aquí está la documentación para el mismo ... $ observar documentos

Answer 3

Ya que esto debe tener un elemento de entrada como padre, simplemente puede usar

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

Alternativamente, puede usar el ngModelController y agregar una función a $formatters , que ejecuta funciones en el cambio de entrada. Consulte 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.
      });
  };
};