Generate javascript in angularjs

Question

Im making a embedable widget and i need to generate a unique JavaScript snippet for the user to copy past into there site. For simplicity i killed most of the code.

widget-generator.js

.directive('widgetGenerate',function() {
        return {
            restrict: 'AE',
            replace: true,
            templateUrl: 'embed.html', // file i need to generate
            scope: {
                "height": "@"
            }
        };
    });

embed.html

<a height='{{height}}'> // WORKS!
</a>
<script type="text/javascript">
  var something = {{height}}; // DOES NOT WORK!!!!!!!!!!!!!!!!!!!!!!
</script>

On page for user to copy past:

<textarea>
  <widget-generate height = '300'/>
</textarea>

Desired text output:

 <a height='300'> </a>
 <script type="text/javascript">
    var something = 300; 
 </script>

Problem is i cannot generate the JavaScript section like this. How can i do this in angularjs?

Instead of including the javascript in your template, can you set what you want on $window in a controller for the directive? $window.something = $scope.height; — Arg0n
– Arg0n, Commented Nov 24, 2015 at 19:36
the textarea needs to display in plain text the final javascript code, if i use your method the final code would look like this: var something = $window.something; instead of var something = 300; — Anthony Raimondo
– Anthony Raimondo, Commented Nov 24, 2015 at 19:40
Have you tried escaping the template? "<" -> "<", ">" -> ">", etc. — Arg0n
– Arg0n, Commented Nov 24, 2015 at 19:51

Arg0n · Accepted Answer · 2015-11-24 20:07:50Z

1

I made a JSFiddle for it to get you in the right direction.

HTML

<div ng-app="myApp">
    <widget-generate height="300"></widget-generate>
</div>

JavaScript

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

app.directive('widgetGenerate',[function() {
    return {
        restrict: 'AE',
        replace: true,
        template:   '<textarea>' + 
                      '&lt;a height="{{height}}"&gt;\r\n' +
                      '&lt;/a&gt;\r\n' +
                      '&lt;script type="text/javascript"&gt;\r\n' +
                      '\tvar something = {{height}};\r\n' +
                      '&lt;/script&gt;' +
                    '</textarea>',
        scope: {
            "height": "@"
        }
    };
}]);

answered Nov 24, 2015 at 20:07

Arg0n

8,4532 gold badges26 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Generate javascript in angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related