javascript - 从 Angular 指令获取输入字段的值

Question

我正在使用来自 this answer 的指令在输入字段中按下回车键时运行函数。

如何将输入字段 element.val() 的值传递给指令调用的函数？或者将输入字段 element 传递给函数，以在检索后清除该值。

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

Answer 1

你可以这样做:

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

并让 Controller 负责值逻辑。请参阅下面的代码。 <强> Live demo (click).

此外，我不建议在您的自定义指令前加上 ng 前缀。我建议提出您自己的前缀作为 namespace 。 ng 是 Angular 的核心。在我的示例中，我使用的是 my-enter 而不是 ng-enter。

示例标记:

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

这是一个独立范围的示例 - 您不需要 $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();
        }
      });
    }
  };
});