7

タイトルと適用/キャンセルボタンを使用して、一般的なダイアログディレクティブを設定しました。ダイアログのスコープは分離されています。

ダイアログディレクティブの内容はトランスクルージョンされているため、そのスコープはダイアログスコープの兄弟です。

Angular jsドキュメントから：

ただし、分離されたスコープは新しい問題を引き起こします。トランスクルージョンされたDOMがウィジェットの分離されたスコープの子である場合、それは何にもバインドできません。このため、ウィジェットがローカル変数の分離スコープを作成する前は、トランスクルージョンされたスコープは元のスコープの子です。これにより、トランスクルージョンされたウィジェットが分離されたスコープの兄弟になります。

しかし、これは私にとって新しい問題を提示します。トランスクルージョンされたDOMは、適用されたときにダイアログに応答できる必要があります。そのため、ダイアログに「適用済み」プロパティを設定し、トランスクルージョンされたDOMに監視させたいと思います。彼らは兄弟なので、これは不可能です！

どこが間違っているのですか？

4

3 に答える 3

13

私は似たようなものに遭遇しました。トランスクルージョンされたスコープに直接アクセスする方法は2つあります（私は知っています）。

1つ目は、コンパイル関数内に自分でスコープを作成し、それをクローンリンク関数とともにトランスクルージョンリンク関数に渡すことです。

function compileFn(tElement, tAttrs, transclude) {
    return linkFn;
    function linkFn(scope, element, attrs) {
        scope = scope.$new();
        scope.name = attrs.works1;
        transclude(scope, function(clone) {
            element.find('div').append(clone);
        });
    };
}

2つ目は、コントローラーを作成し、新しいスコープに事前にバインドされている$transcludeサービスを注入することです。クローンリンク関数は、2番目のパラメーターとして新しいスコープを受け取ります。

function Controller($element, $attrs, $transclude) {
    $transclude(function(clone, scope) {
        scope.name = $attrs.works2;
        $element.find('div').append(clone);
    });
}

どちらの場合も、ngTranscludeを使用する代わりに、自分でトランスクルージョンを実行するためのクローンリンク関数を提供する必要があります。

両方の例については、http：//jsfiddle.net/dbinit/wQC7G/6/を参照してください。

于 2013-01-21T02:08:53.537 に答える
0

桶、私は解決策を見つけたと思います。実際のダイアログを、ダイアログのスコープを定義するディレクティブでラップしました。ダイアログのコンテンツは引き続きダイアログでトランスクルージョンされますがparent of the dialog、ダイアログ自体ではなく（!!）から親スコープを取得するため（トランスクルージョンはこのように機能します）、これは非常にうまく機能します。

さらに、ダイアログでを使用して、ダイアログが適用されたときにsg-importディレクティブを応答させることができます&property。ダイアログが適用されるとsg-apply、親スコープのコンテキストで関数を評価します（スコープは自動的に実行され、コントローラーのapply（）関数からメソッドを呼び出す必要があります）。

<div sg-import>
    <div 
        sg-dialog title="Import Photographs" 
        visible="show_import_dialog" 
        sg-apply="upload()"
    >
        <div class="drop-zone">
            <div sg-photo title="{{ file.name }}">
            </div>
            <input type="file" multiple />
        </div>
    </div>
</div>
于 2013-01-22T17:49:03.793 に答える
0

$watch ターゲットを持つ配電盤として機能するモデルを共通の祖先に作成する場合は、既存の機能を使用して、各ディレクティブを変更したり、その配電盤モデルを監視したりできます。コンポーネントのアクセス モードとコンテンツ コンテンツのコントローラには、スコープごとに 2 つの非常に異なる呼び出しシグネチャがあり、トランスクルージョンされたケースにはわずかな「落とし穴」があります。

双方向バインディングによる分離スコープ

ディレクティブの Isolate スコープを登録するとき、=attrName" により、"attrName" という名前の domainName プロパティが検査されます。Angular は、いずれかのスコープのモデルの値の変更が兄弟スコープのモデルにも影響するように、双方向バインディングを設定します。 .

例

controller-parent.js で:

module.controller( 'ParentController', function() {
    $scope.switchboard = { };
}

ディレクティブ-sg-dialogue.js 内

return {
    scope: {
  isolatedPeer: "=dialogModel"
};

... ディレクティブ メタデータ内 ...

<div ng-controller="ParentController">
    <sg-dialog dialog-model="switchboard">
        <div ng-controller="ChildController"></div>
    </sg-dialog>
</div>

... いくつかのアプリケーション ビュー テンプレートで、そして ...

$scope.switchboard = { isApplied: false }

...アプリケーションビューテンプレートにバインドされたコントローラー内...

次に、すべての準備が整いました...

$scope.$watch( 'switchboard.isApplied', function(newValue, oldValue) { })

... 共通の祖先で、... の後にコールバックを取得します。

isolatedPeer.isApplied = true;

... 隔離された範囲で。

プロトタイプの継承

トランスクルードされた子に $scope.swtichboard を明示的に設定しない限り、トランスクルードされた子の角度式から「switchboard.isApplied」にアクセスし、補間エンジンに、割り当てられて保存された値を「見つけさせる」ことができます。独自のスコープ内の親コントローラー。

たとえば、次のコールバックは、ペア ダイアログ ボックスが閉じられるたびに呼び出されます。

$scope.$watch( 'switchboard.isApplied', function(newValue, oldValue) { } );

トランスクルージョンされた子には、分離されたスコープではなく、常に基本的なスコープが与えられるため、これは機能します。

これが役に立てば幸いです！

于 2013-05-29T13:54:30.247 に答える