0

私は指令を持っています：

app.directive('mydirective', function () {
    return {
        scope: {
            field: '='
        },
        require: 'ngModel',
        link: function (scope, element, attrs, contr) {
            contr.$parsers.unshift(function (value) {
                console.log(scope.mymodel);
            });
        }
    }
});

ディレクティブを使用するフォームがあります

<form ng-submit="submit()">
  <input type="text" ng-model="mymodel" mydirective field="123" />
  <div>{{mymodel}}</div>
</form>

input要素のモデルは に設定されmymodelます。の下に、inputこのモデルの値を表示したいと思います。

問題は、値{{mymodel}}がレンダリングされないことです。そして、フィールドに入力してもmymodel、現在の状態$scopeは決して変わらないようです。input

これは、ディレクティブが別のスコープを作成するためだと思いましたがconsole.log(scope.mymodel)、関数内でも同様にlink出力undefinedされます。

なくmydirectiveてinputも、フィールドの下にあるモデルの値を問題なく確認できます。

モデルがどこに保管されているか説明してもらえますか? それはどのスコープにありますか？

ライブコード:

http://jsfiddle.net/E8QXz/

4

2 に答える 2

1

2つのこと：

  1. Chandermani が書いたようscope: { field: '=' },に、入力に新しいスコープを導入しています。mymodelしたがって、 asを参照する必要がありますng-model="$parent.mymodel"。そうしないと、angular が間違ったスコープを参照します。

    <input type="text" ng-model="$parent.mymodel" mydirective field="123" />

  2. $parsers値を返す必要があります。そうしないと、パーサー チェーンが壊れます。

    ctrl.$parsers.unshift(function (value) {
  console.log(value);
  return value; // <- add this
});

修正されたコード (再構築を許してください ;)):

(function (app, ng) {
  app.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.submit = function submit() {
      console.log('submit');
    };
  }]);

  app.directive('mydirective', function () {
    return {
      require: 'ngModel',
      scope: { field: '=' },
      link: function (scope, element, attrs, ctrl) {
        ctrl.$parsers.unshift(function (value) {
          console.log(value);
          return value; // <- add this
        });
      }
    };
  });
}(angular.module('myapp', []), angular));

デモ: http://jsbin.com/uzixey/1/

于 2013-07-30T09:48:27.557 に答える