javascript - Get value of input field from Angular directive - Stack Overflow

admin管理员组

文章数量:1390334

I'm using the directive from this answer to run a function when the enter key is pressed in an input field.

How can I pass the value of the input field element.val() to the function the directive calls? Or pass the input field element to the function, to clear the value after it's retrieved.

HTML

<input type="text" ng-enter="newField()" />

JS

app.directive('ngEnter', function() {
    return function(scope, element, attrs) {
        element.bind("keydown keypress", function(event) {
            if(event.which === 13) {
                element.val(); // value of input field

                scope.$apply(function(){
                    scope.$eval(attrs.ngEnter); // passed to this function
                });

                event.preventDefault();
            }
        });
    };
});

I'm using the directive from this answer to run a function when the enter key is pressed in an input field.

How can I pass the value of the input field element.val() to the function the directive calls? Or pass the input field element to the function, to clear the value after it's retrieved.

HTML

<input type="text" ng-enter="newField()" />

JS

app.directive('ngEnter', function() {
    return function(scope, element, attrs) {
        element.bind("keydown keypress", function(event) {
            if(event.which === 13) {
                element.val(); // value of input field

                scope.$apply(function(){
                    scope.$eval(attrs.ngEnter); // passed to this function
                });

                event.preventDefault();
            }
        });
    };
});

• javascript
• angularjs

Share Improve this question Follow edited May 23, 2017 at 12:15 CommunityBot 111 silver badge asked Jan 22, 2014 at 3:24 nathancahillnathancahill 10.9k1111 gold badges5555 silver badges9393 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You could just do this:

var func = scope.$eval(attrs.ngEnter);
func();

and have the controller take care of the value logic. See the code below. Live demo (click).

Also, I don't remend prefixing your custom directives with ng. I suggest ing up with your own prefix as a namespace. ng is for Angular's core. In my examples, I am using my-enter rather than ng-enter.

Sample markup:

  <input 
    type="text" 
    ng-model="foo" 
    my-enter="myFunc"
    placeholder="Type stuff!"
  >
  <p ng-repeat="val in cachedVals track by $index">{{val}}</p>

JavaScript:

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

app.controller('myCtrl', function($scope) {
  $scope.cachedVals = [];
  $scope.foo = '';
  $scope.myFunc = function() {
    $scope.cachedVals.push($scope.foo);
    $scope.foo = '';
  };
});

app.directive('myEnter', function() {
  return function(scope, element, attrs) {
    element.bind("keydown keypress", function(event) {
      if(event.which === 13) {
        scope.$apply(function(){
          var func = scope.$eval(attrs.myEnter);
          func();
        });
        event.preventDefault();
      }
    });
  };
});

Here's an example with an isolated scope - you don't need to $eval.

app.directive('myEnter', function() {
  return {
    scope: {
      func: '=myEnter'
    },
    link: function(scope, element, attrs) {
      element.bind("keydown keypress", function(event) {
        if(event.which === 13) {  
          scope.$apply(function(){
            scope.func();
          });  
          event.preventDefault();
        }
      });
    }
  };
});

Have you tried ng-submit? I have created a fiddle to show you how do to what you are after without requiring your own directive.

http://jsfiddle/a6k7g/

Obviously this answer depends on your requirements, and the form plexity.

本文标签： javascriptGet value of input field from Angular directiveStack Overflow