0

ディレクティブを理解しようとしていますが、双方向のデータ バインディングに問題があります。

私のディレクティブは、テキストエリアで「Enter」が押されたときにフォームを送信するために使用されます。

別の 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

要素で複数のディレクティブが使用されている場合、通常、すべてのディレクティブで Isolate スコープを使用する必要はありません。特に、isolate スコープは 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);
            }
          }
        });
      }
    }
  });
于 2013-08-14T14:14:18.333 に答える