4

ng-modelその値を公開するために使用するディレクティブがあります。

問題は、このディレクティブにはスコープを台無しにする内部コンポーネントがあるため、そのスコープを分離する必要がありますが、それでもng-model外部世界へのバインドは維持します。

どうすればこれを達成できますか？

これはディレクティブです:

angular.module('app', []).directive('myDirective', function() {
  return {
    restrict: 'E',
    require: 'ngModel',
    link: function(scope, element, attr, ngModel) {
      // do stuff using ngModel controller
    },
    replace: true,
    template: '<div><input ng-model="userInput" /></div>'
  };
});

<my-directive ng-model="prop"></my-directive>

ご覧のとおり、ディレクティブはpropその値として公開する必要がありますがuserInput、 で定義されている親スコープでは公開しないでください<input ng-model="userInput"/>。

prop親スコープでのみ使用できるようにするにはどうすればよいですか?

4

1 に答える 1

3

通常、ngModelController は、新しいスコープを作成しないディレクティブと共に使用することを意図しています。分離スコープで動作させるために私が見つけた唯一の方法は、分離スコープで同じ名前を使用することです。

scope: { prop: '=ngModel' }  // must use 'prop' here!

これに関する詳細については、私の SO の回答を参照してください: https://stackoverflow.com/a/14792601/215945

を使用してディレクティブに新しいスコープを作成させることもできますscope: true。これを行う場合prop、プリミティブではなく、オブジェクト プロパティである必要がありますng-model='someObj.prop'。このアプローチの詳細については、このhttps://stackoverflow.com/a/13060961/215945の最初のフィドルを参照してください

これにより、親スコープに影響を与えることなく、新しいディレクティブの子スコープで独自の (新しい) プロパティを作成できます。スコープのプロトタイプの継承がどのように機能するかを認識する必要があります。親スコープで定義されたオブジェクトは、ディレクティブの子スコープで表示および変更可能になります。 親スコープで定義されたプリミティブは表示されますが、親プリミティブの値を変更しようとすると、同じ名前の親プロパティを非表示/シャドウにする子プロパティが作成されます。(プロトタイプの継承に関する詳細は、こちらを参照してください。)

于 2013-03-12T18:41:39.950 に答える