HTML不在angular指令内编译

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);

        }
    }
});

在视图中我有:

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

html没有编译.这是一个JsFiddle

Answer 1

template是你编译的元素.htmlText是原始的html字符串.更改element.replaceWith(htmlText);到element.replaceWith(template);.