CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Jesse
Jesse

Reputation: 825

Compile Service with Angular

I want to create html based on variables, I created a directive and called "node", and I wanted to use it as a template to generate markup based what attributes are passed into the directive. However angular won't render the markup from the variable? I know there is a way to do it I have seen a few tutorials on how to use the compile service but its not what I need.

Here is my markup

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>My ng repeatStart</title>
</head>
<body ng-controller="AppCtrl">
    <node type="div" text="20">

    </node> 

</body>
</html>
<script src="download/angular/angular.min.js"></script>
<script src="download/angular-sanitize/angular-sanitize.min.js"></script>
<script>
    var app = angular.module('repeatStart', []);

    angular.element(document).ready(function(){

        angular.bootstrap(document.querySelector('body'), ['repeatStart']); 

    });

    app.directive("node", function(){

        return {

            restrict:"E",
            controller:"AppCtrl",
            scope:{type:"@", text:"@"},
            link:function(scope, element, attr, ctrl){
                console.log(scope.type);
                console.log(scope.text);
            },
            template:"<{{scope.type}}>{{scope.text}}</{{scope.type}}>"

        }

    })


    function AppCtrl($scope, $compile){

      $scope.elements = [
          {

            type:"range",
            text:"Lorem ipsum dolor sit"
          },
          {
            type:"div",
            text:"Lorem ipsum dolor sit"
          },
          {

            type:"div",
            text:"Lorem ipsum dolor sit"
          },
          {
            type:"range",
            text:"Lorem ipsum dolor sit"
          },
          {
            type:"range",
            text:"Lorem ipsum dolor sit"
          },
       ];

    }
</script>

in the line of javacript - template:"<{{scope.type}}>{{scope.text}}" Will not compile to a div the scope.text and the scope.type variables won't show up as markup?

Upvotes: 0

Views: 115

Answers (1)

ppa
ppa

Reputation: 326

Maybe something like this?

app.directive("node", function(){

    return {

        restrict:"E",
        controller:"AppCtrl",
        scope:{type:"@", text:"@"},
        link:function(scope, element, attr, ctrl){
            console.log(scope.type);
            console.log(scope.text);

            var htmlText = '<' + scope.type +  '>' + scope.text +  '</' + scope.type +  '>';
            element.replaceWith(htmlText);

        }

    }

});

Upvotes: 1

Related Questions