0

別の質問に答えているときに、属性を介して子モデルを親ディレクティブに渡すことができないことに気付きました。

この設定を考えると：

<form child-watch mod="inputModel" name="form"><!--ignore creepy directive name-->
  <input type="text" name="one" ng-model="inputModel.one">
  <input type="text" name="two" ng-model="inputModel.two"><br/>
  <input type="submit" ng-disabled="form.$pristine">
  <p>Original Model: {{original}}</p>
  <p>Isolate Scope Model: {{isolate}}</p>
</form>

$watch属性を介してディレクティブ内のinputModelをどのように使用し、子によって行われた変更を表示できますか? 分離スコープを使用すると、分離された子の影響を受けない親モデルに対してのみ $watch UP します。

明らかにこれは機能しませんが、私が行っている方向を見ることができます:

app.directive('childWatch', function(){
    return {
        // removing the isolate scope allows parent scope.inputModel to update
        scope:{
            mod: "="
        },
        link: function(scope, element, attrs){


            //this does not reflect change upon the parent scope.inputModel
            //if using isolate scope.  AND, I don't want to $watch a specific
            // model, because the directive needs to be reusable.  It needs to watch
            // an attribute that references the model.
            scope.$watch('inputModel', function(val){
                scope.original = val;        
            },true)


            //this only has access to the parent scope.inputModel
            scope.$watch('mod', function(i){
                scope.attribute = i;            
            }, true)
        }    
    }
})

ディレクティブをさまざまなモデルで再利用できるようにするために、特定のモデルだけを見ることはできません。モデルを参照する属性を監視する必要があります。これが可能かどうかはわかりません。何か案は？

これが私がいじっているプラ​​ンクです。

4

1 に答える 1

0

分離スコープを使用する場合、参照されているプロパティのみscope: { ... }がビューとディレクティブで使用できます。modどこでも使用できます。

<form child-watch mod="inputModel" name="form">
  <input type="text" name="one" ng-model="mod.one">
  <input type="text" name="two" ng-model="mod.two"><br/>
  <p>Model in attribute: {{attribute}}</p>
  <p>Original model: {{mod}}</p>
</form>

プランカー

于 2013-07-10T16:35:27.870 に答える