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 回答