Angularjs 具有指令和隔离作用域的双向数据绑定

我试图理解指令，但双向数据绑定有问题

当在文本区域中按“回车”时，我的指令将用于提交表单

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

-->

以下是html部分：

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

绑定：{{foo}}

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

var-app=angular.module（'testApp'，[]）；
函数MyController（$scope）{
$scope.foo=“bar”
$scope.submit=函数（）{
控制台日志（“提交表格”）；
}
}
应用程序指令（'enterSubmit'，函数（）{
返回{
限制：“A”，
范围：{
submitFn:“&输入提交”，
foo:'=ngModel'/当在一个元素上使用多个指令时，通常您不希望它们中的任何一个使用隔离作用域，因为这会迫使它们全部使用隔离作用域。特别是，隔离作用域不应与ng model一起使用–请参阅

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

app.directive（'enterSubmit'，函数（）{
返回{
限制：“A”，
//范围：{
//submitFn:“&输入提交”，
//foo:'=ngModel'//无论如何，您必须在某个时刻耦合变量赋值。您无法摆脱它。谢谢，我使用了隔离作用域，因为我想使用controller函数提交，但不知道“scope.$apply”。您的解释很有道理，而且很有效！@y_ub_u_uy，您也可以使用$eval:
scope.$eval（attrs.enterSubmit）
如果您不需要运行摘要循环。
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);
            }
          }
        });
      }
    }
  });