javascript - HTML 未在 Angular Directive(指令)内编译

Question

angular.module("vtApp.directives").
directive('multirangeslider', function ($compile) {
    return {
        restrict: 'E',
        replace: true,
        link: function (scope, element, attrs) {
            var variances, values, options, template, compile;
            scope.variances = eval (attrs.variances);
            scope.values = scope.$eval(attrs.values);
            var htmlText = '<div id="'+attrs.id+'"><table class="CRC"><tbody><tr>';
            for (var i=0; i<scope.values.length; i++) {
                htmlText += '<td id="val' + i + '" style="width:' + scope.values[i] + '%;"> ' + scope.variances[i] + ': <strong>{{ranges[' + i + ']}}%</strong></td>';
            }
            htmlText += '</tr></tbody></table></div>';

            template = angular.element(htmlText);
            $compile(template)(scope);
            element.replaceWith(htmlText);

        }
    }
});

在我的 View 中:

<multirangeslider values="ranges" variances="['Master', 'Template A', 'Template B']"></multirangeslider>

html 未编译。这是一个 JsFiddle

Answer 1

template 是您编译的元素。 htmlText 是原始的 html 字符串。将 element.replaceWith(htmlText); 更改为 element.replaceWith(template);。