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

Question

我正在使用这个答案中提供的指令，在输入字段中按下回车键时运行一个函数。

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

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

- nathancahill

Answer 1

你可以这样做：

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

请让控制器处理值逻辑。请参阅以下代码。 演示（单击）。

此外，我不建议使用以ng为前缀的自定义指令。我建议您使用自己的前缀作为命名空间。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();
        }
      });
    }
  };
});

- m59

---

嗯...不太对。我只是想在用户按下回车键时获取值，使用它，然后清除输入字段。ng-change会在每次按键时执行。 - nathancahill

@nathancahill 是的，我正在处理指令并且现在看到了。那只是我的第一个想法。我很快就会完成！ - m59

$eval或scope.$apply哪个更好？ - nathancahill

@nathancahill 嗯？它们不相关。我建议在我的帖子底部使用指令$apply，因为你正在 Angular 之外触发 Angular 代码（事件块）。 $eval 从名称字符串中获取作用域值。 - m59

@nathancahill 我最后更新了一次。看看吧 - 关于 ng 的重要说明。 - m59

Answer 2

你尝试过 ng-submit 吗？我已经创建了一个 fiddle 来展示如何实现你想要的功能，而不需要使用你自己的指令。

http://jsfiddle.net/a6k7g/

显然，这个答案取决于您的需求和表单的复杂性。

- Matt Way

---

ng-submit 只适用于表单元素，而这只是一个输入字段。 - nathancahill

所以将其包装在表单元素中！ - Matt Way