1

さまざまなフィールド タイプのリストがあり、タイプに基づいてテンプレートを適用したいと考えています。次のようなインライン テンプレートを使用すると、動作させることができます。

flowPageModule.directive('myField', ['$compile','$http', '$templateCache', function($compile, $http, $templateCache) {

var inlineTemplateMapping = {
        select: '<div><span> {{label}} &nbsp <select ng-model="metadata.options[0]" ng-options="o.text for o in metadata.options"></select> </span></div>',
        text: '<div><span> {{label}} &nbsp <input type="text" /> </span></div>'
    }

return {

    restrict: 'E',
    replace: true,
    transclude: true,
    scope: { type: '=', label: '=', metadata: '=' },
    link: function (scope, element, attrs) {

        if (scope.metadata) { alert(scope.metadata.options[0].text); }
        var templateLiteral = inlineTemplateMapping[scope.type];
        element.html(templateLiteral);
        $compile(element.contents())(scope);
    }

};

}]);

$http サービスを使用してファイルからテンプレートを取得できれば、それが機能することを本当に望んでいます。以下を試してみましたが、常に Type エラーが発生します。

flowPageModule.directive('myField', ['$compile','$http', '$templateCache', function($compile, $http, $templateCache) {

var baseUrl = 'directives/field/',
    typeTemplateMapping = {
        text: 'my-field-text.html',
        select: 'my-field-select.html'
    };

return {

    restrict: 'E',
    replace: true,
    transclude: true,
    scope: { type: '=', label: '=', metadata: '=' },
    link: function (scope, element, attrs) {

            var templateUrl = baseUrl + typeTemplateMapping[scope.type];
            $http.get(templateUrl, {cache: $templateCache}).success( function(html) {
                element.html();
                $compile(element.contents())(scope);
            }); 
    }

};

}]);

なぜこれが起こるのですか？

4

1 に答える 1

1

私はこれを作成するために報酬を受け取りましたが、実際には実装を気にする人は誰もいないので (良いか悪いか?)、これをコミュニティに自由に共有できます。別の SO 回答から loadT() 関数を採用しました。「ダイナミック テンプレート アンギュラー」で検索すると見つかります。ここでの適応により、$http promise が返されていない間、空のコンポーネントを表示できます。

用途

<p dynamic template="'template/file.html'"></p>

<p dynamic template="someObjectInController.value"></p>

※透視は効きません。そのため、自由に追加/修正してください。問題は、transclude 関数のドキュメントがないことにあります。

cpanel.directive("dynamic",  ["$compile", '$templateCache', '$http',
    function ($compile, $templateCache, $http) {
        return {
            priority: 0,
            restrict: 'EA',
            replace: true,
            transclude: true,
            controller: 'SomeController',
            scope: {
                template: "@template"
            },
            link: function (scope, iElement, iAttrs) {

                scope.$parent.$watch(iAttrs.template, function (newvalue, oldvalue) {
                    if ((oldvalue !== newvalue) && (newvalue !== undefined) && (newvalue !== null)) {
                        loadT(newvalue);
                    } else if ((newvalue !== undefined) && (newvalue !== null)) {
                        loadT(newvalue);
                    } else {
                        //TODO
                    }
                }, true);

                function loadT(it) {
                    $http.get(it, { cache: $templateCache}).success(function (templateContent) {
                        iElement.replaceWith($compile(templateContent)(scope));
                    });
                }
            }
        };
    }
]);
于 2013-12-20T15:16:35.683 に答える