Question

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

当在textarea中按下“enter”时，我的指令将用于提交表单。

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

- ＆GT; Here is the problem in 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();
            }
          }
        });
      }
    }
  });

感谢您的帮助！

Answer 1

当在元素上使用多个指令时，通常您不希望它们中的任何一个使用隔离范围，因为这会强制所有指针使用隔离范围。特别是，隔离范围不应与ng-model一起使用 - 请参阅Can I use ng-model with isolated scope?。

我建议不要创建新的范围（默认值，即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);
            }
          }
        });
      }
    }
  });

双向数据绑定与指令和隔离范围

1 个答案: