Angular directives do not support the compilation of HTML code within them

Question

Angular directives do not support the compilation of HTML code within them

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

        }
    }
});

and within the view I am using:

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

The html content is not being compiled. You can see an example of this issue in this JsFiddle

javascript angularjs angularjs-directive

Answer 1

Answer №1

compiledTemplate represents the compiled element. The initial html string is stored in originalHTML. Replace the line

element.replaceWith(originalHTML);

with

element.replaceWith(compiledTemplate);

.

Answer 2

compiledTemplate represents the compiled element. The initial html string is stored in originalHTML. Replace the line

element.replaceWith(originalHTML);

with

element.replaceWith(compiledTemplate);

.

Answer 3

Answer №2

I made updates to your fiddle and it is now functioning properly.

http://jsfiddle.net/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 ($compile) {
    return {
        restrict: 'E',
        scope :{ranges:'='},
        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 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);

            template = angular.element($compile(htmlText)(scope));
            //$compile(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>

Answer 4

I made updates to your fiddle and it is now functioning properly.

http://jsfiddle.net/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 ($compile) {
    return {
        restrict: 'E',
        scope :{ranges:'='},
        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 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);

            template = angular.element($compile(htmlText)(scope));
            //$compile(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>

Angular directives do not support the compilation of HTML code within them

Answer №1

Answer №2

Similar questions

``The Art of Handling REST API with Express and Mongoose

Discord.JS Guild Member Cache Responses that are not recognized as valid

Using Angular's ng-href directive in conjunction with the Split method

Switch to light mode upon clicking the toggle?

Translating .NET webclient request into JavaScript Syntax

What is the best way to access specific information about the top card in a Trello list?

Revise the modal window

If there is only one remaining option after applying the angular filter, automatically choose that option

Different ways to showcase a value from the CSS file on the console using console.log

Using Javascript to Manuever an Element via Arrow Inputs

Creating a reusable service for making REST API calls with $http

I am seeking a way to conceal list elements according to a specified string input using JavaScript

How can we enable Material UI tooltip based on certain conditions?

What could be causing my jQuery to fail when the page first loads?

Vue is struggling to load the component files

Prevent duplicate components from interacting with one another in Angular

Guide on efficiently utilizing ui-select within the ng-repeat directive

Transferring information to a partial view using a jQuery click event

"Discover the process of utilizing jQuery to trigger an action when scrolling past a

The Perfect Scrollbar feature is not functioning properly in conjunction with the accordion menu