0

$scope.templatesにバインドされたドロップダウンに一連のテンプレートがあります。

[{"id":1, "name":"Test 1",{"id":2, "name":"Test 2"}]。

私にも指示があります、

<editor data-template="1"></editor>

ドロップダウンで選択したテンプレートに応じて、適切なテンプレートを使用してディレクティブを再レンダリングする必要があります。これは可能ですか？これまで、フィールドをdivに1対1でデータバインディングするだけで、ディレクティブ全体の再レンダリングをトリガーするものは何もありませんでした。この状況に対する最善のアプローチは何ですか？

更新：ディレクティブ$ scopeのさらに基本的なものは、クロスコントローラーの双方向バインディングです。たとえば、コントローラー間でサービスオブジェクトの同期を維持する方法がわからないようです。私が本当に望んでいるのは、一方のコントローラーの変更をもう一方のコントローラーで使用できるようにすることです。その逆も同様です。http://jsfiddle.net/9gSVn/1/

4

1 に答える 1

1

1つの方法は、スコープ値が変更されたときにhtmlの内容を置き換えるディレクティブを作成することです。このブログ投稿は、動的テンプレートを使用してディレクティブを作成する手順を説明するのに非常に役立ちます。

モデルの変更を監視するディレクティブのサンプルフィドルは次のとおりです。

module.directive('template', function () {
    var getTemplate = function (id) {
        var template = '<div>no template for ' + id + '</div>';

        switch (id) {
            case 1:
                template = '<div>template 1 from directive</div>';
                break;
            case 2:
                template = '<div>template 2 also from directive</div>';
                break;
        }

        return template;
    }
    return {
        restrict: 'E',
        replace: true,
        scope: { id: '=templateId' },
        link: function (scope, element, attrs) {
            scope.$watch('id', function (newValue, oldValue) {
                element.html(getTemplate(newValue));
            });
        }
    };
});
于 2012-10-23T18:44:53.253 に答える