angular.module("vtApp.directives").
directive('multirangeslider', function ($pile) {
    return {
        restrict: 'E',
        replace: true,
        link: function (scope, element, attrs) {
            var variances, values, options, template, pile;
            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);
            $pile(template)(scope);
            element.replaceWith(htmlText);

        }
    }
});

and inside the view I have:

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

The html is not piled. Here is a JsFiddle

angular.module("vtApp.directives").
directive('multirangeslider', function ($pile) {
    return {
        restrict: 'E',
        replace: true,
        link: function (scope, element, attrs) {
            var variances, values, options, template, pile;
            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);
            $pile(template)(scope);
            element.replaceWith(htmlText);

        }
    }
});

and inside the view I have:

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

The html is not piled. Here is a JsFiddle

• javascript
• angularjs
• angularjs-directive

2 Answers 2

template is the element you've piled. htmlText is the original html string. Change element.replaceWith(htmlText); to element.replaceWith(template);.

I update your fiddle, it's now work

http://jsfiddle/timactive/SXSXf/2/

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {

    $scope.name = 'Superhero';
     $scope.ranges = [33, 33, 34];
}

myApp.
directive('multirangeslider', function ($pile) {
    return {
        restrict: 'E',
        scope :{ranges:'='},
        replace: true,
        link: function (scope, element, attrs) {
            var variances, values, options, template, pile;
            scope.variances = eval(attrs.variances);

           // scope.values = scope.$eval(attrs.values);
            var htmlText = '<div id="' + attrs.id + '"><table width="100%" cellspacing="0" cellpadding="0" border="1"><tbody><tr>';
            for (var i = 0; i < scope.ranges.length; i++) {
                console.log(scope.ranges[i]+" " + scope.variances[i]);

                htmlText += '<td id="val' + i + '" style="width:' + scope.ranges[i] + '%;"> ' + scope.variances[i] + ': <strong>{{ranges[' + i + ']}}%</strong></td>';
            }
            htmlText += '</tr></tbody></table></div>';
            console.log(htmlText);
            //htmlText += "{{ranges | json}}";

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


        }
    }
});

html :

<div ng-controller="MyCtrl">
    {{name}}
    {{ranges | json}}
  <multirangeslider ranges="ranges" variances="['Master', 'Template A', 'Template B']"></multirangeslider>
    <br />
    range1 : <input type="text" ng-model="ranges[0]"/>
    range2 : <input type="text" ng-model="ranges[1]"/>
    range3 : <input type="text" ng-model="ranges[2]"/>

</div>