0

次を使用してプロパティをバインドするディレクティブがあります。

scope: {modelVar: "="}

ディレクティブ テンプレートはその変数を利用します。

<input ng-model="modelVar">

このディレクティブを別のディレクティブ内にトランスクルードするまで、これはうまく機能します。次に、入力ディレクティブが子スコープに存在し、親とのバインディングが機能しなくなります。

私が見つけた解決策は、スコープ内のいくつかのプロパティ内に modelVar を配置することでした。しかし、コントローラーをディレクティブに追加し、この新しいプロパティと直接スコープ内にあるプロパティとの間に独自の双方向バインディングを設定する必要があります。

双方向バインディングを回避できるようにする簡単な方法はありますか?

こちらのコードを参照してくださいhttp://plnkr.co/edit/FiyDYLlJQ9aq2KZm5mIg?p=preview

4

1 に答える 1

1

ディレクティブは次のinputControlように簡略化できます。

app.directive('inputControl', function () {
    return {
        restrict: 'A',
        template: '<div control-container>Input: <input ng-model="$parent.modelVar"></div>',
        scope: {
            'modelVar': '='
        }
    }
});

これはスコープ図です

[div inputControl] [modelVar]
                       ^
       |               |

[controlContainer] [$parent.modelVar] <-new scope S

       |             |

       transcluded [Value] <- transcluded scope, not isolated scope, it should be sibling of the new scope S

Demo

于 2013-09-10T03:36:23.363 に答える