2

Angular で States Select のディレクティブを作成しています。それは機能していますが、DOM に入れる前にテンプレートをコンパイルする方法を見つけようとしてしばらく時間を費やしました。現在、次のように機能します。

 app.register.directive('stateDropdown', ['StatesFactory', '$compile', function (StatesFactory, $compile) {
        function getTemplate(model) {
            var html = '<select ng-model="' + model + '" ng-options="state.abbreviation as state.name for state in states" class="form-control"></select>';
            return html;
        }

        function link (scope, element, attrs) {
            scope.states = StatesFactory.States;
            element.html(getTemplate(attrs.stateModel));
            $compile(element.contents())(scope);
        }
        return {
            replace: true,
            link: link

        }
    }]);

ただし、テンプレートを要素に挿入し、スコープに対してコンパイルします。これを行うより良い方法はありますか？テンプレートを挿入する前にコンパイルするなど？

4

1 に答える 1

3

私が以前持っていたものをスクラッチします。

[編集2]

動的モデルの使用は、通常の Angular ワークフローに適合させようとすると少し問題があります。代わりに、手動でディレクティブのテンプレートをコンパイルする必要がありますが、その前に ng-model を追加してください。既存の要素をビルドされたテンプレートで置き換えることも管理する必要があります。

module.directive('stateDropdown', function (StatesFactory, $compile) {

    var template = '<select ng-options="state.abbreviation as state.name for state in states" class="form-control"></select>';
    return {
        scope: true,
        controller: function($scope) {
            $scope.states = StatesFactory.states;
        },
        compile: function($element, $attrs) {
            var templateElem = angular.element(template).attr('ng-model', '$parent.' + $attrs.stateModel);
            $element.after(templateElem);
            $element.remove();
            var subLink = $compile(templateElem);
            return {
                pre: function(scope, element, attrs) {
                    subLink(scope);
                },
                post: function(scope, element, attrs) {
                }
            }
        }
    };

});

これの実例はここにあります: http://jsfiddle.net/u5uz2po7/2/

この例では、「状態」をスコープに適用しても既存のスコープに影響を与えないように、分離されたスコープを使用しています。それが「$parent」の理由でもあります。ngモデルで。

于 2014-11-19T23:55:05.320 に答える