1

ngModel を必要とし、ngModel のパーサーとフォーマッター関数を追加する、入力要素に適用される構成可能なディレクティブを作成しようとしています。

私が抱えている問題は、ngModel バインディングを同時にサポートしながら、補間された値をディレクティブに渡すことができないように見えることです。たとえば、次の 2 つの方法のいずれかでディレクティブを使用できるようにしたいと考えています。

リテラル引数を渡す:

<input ng-model="foo" my-directive="120" />

または現在のスコープから補間された引数を渡します。

<input ng-model="foo" my-directive="{{bar}}" />

...
function MyCtrl($scope) {
  $scope.bar = "120";
}

ディレクティブ定義でリンク関数の属性引数を読み取ると、1 回目の使用では attributes.myDirective の値を取得できますが、2 回目の使用では myDirective の値は未定義です。

ここで、分離スコープをディレクティブ定義に追加すると、次のようになります。

scope: { myDirective: '@' }

次に、上記のシナリオで scope.myDirective が定義および補間されますが、ngModel が壊れています。私のパーサー/フォーマッター関数は、入力引数に対して未定義で渡されます。何が起こっているのか、どうすれば私が望む動作を実装できますか?

指令：

module.directive('myDirective', function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            replace: false,
            link: function (scope, elm, attrs, ctrl) { // attrs.myDirective not interpolated
4

1 に答える 1

2

ngModel分離スコープを追加すると、の値を持つスコープから継承されない、まったく新しい子スコープが作成されます。そのため、パーサーとフォーマッターが未定義になっています。

また、あなたの例では、の値を取得するためにbar、中括弧でそれを必要としません:

<input ng-model='foo' my-directive='bar' />

そして、あなたのリンク機能で：

link: function(scope, element, attr, ctrl) {
  attr.myDirective == 'bar'.
  scope.$eval(attr.myDirective) == // whatever the value of 'bar' is in the current scope
}

したがって、分離スコープは必要ありません。scope.$evalディレクティブに渡された式を評価するために使用するだけです。

ここに簡単なフィドルがあります。

于 2013-02-15T18:08:52.597 に答える