0

我正在尝试理解指令，但我遇到了双向数据绑定的问题。

当在文本区域中按下“输入”时，我的指令将用于提交表单。

我在另一个 SO 线程中找到了解决方案（请参阅指令范围定义中的以下代码），但我不喜欢它，因为这意味着如果我更改模型名称，我也需要更改指令..

-->这是codepen.io中的问题

这是html部分：

<div ng-app="testApp" ng-controller="MyController">
  <textarea ng-model="foo" enter-submit="submit()"></textarea><br/>
  Binding: {{foo}}
</div>

这是javascript部分：

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

function MyController($scope) {

  $scope.foo = "bar"

  $scope.submit = function() {
    console.log("Submitting form");
  }
}

app.directive('enterSubmit', function () {
    return {
      restrict: 'A',
      scope: {
        submitFn: '&enterSubmit',
        foo: '=ngModel'      // <------------------- dont't like this solution
      },
      link: function (scope, elem, attrs) {

        elem.bind('keydown', function(event) {
          var code = event.keyCode || event.which;

          if (code === 13) {
            if (!event.shiftKey) {
              event.preventDefault();
              scope.submitFn();
            }
          }
        });
      }
    }
  });

谢谢你的帮助 ！

4

1 回答 1

0

当在一个元素上使用多个指令时，通常您不希望它们中的任何一个使用隔离范围，因为这会迫使所有指令都使用隔离范围。特别是，隔离范围不应该与 ng-model 一起使用 - 请参阅我可以将 ng-model 与隔离范围一起使用吗？.

我建议不要创建新范围（默认值，即scope: false）：

app.directive('enterSubmit', function () {
    return {
      restrict: 'A',
      //scope: {
      //  submitFn: '&enterSubmit',
      //  foo: '=ngModel' // <------------------- dont't like this solution
      //},
      link: function (scope, elem, attrs) {
        elem.bind('keydown', function(event) {
          var code = event.keyCode || event.which;
          if (code === 13) {
            if (!event.shiftKey) {
              event.preventDefault();
              scope.$apply(attrs.enterSubmit);
            }
          }
        });
      }
    }
  });
于 2013-08-14T14:14:18.333 回答