Include javascript external file if allowed in AngularJS

Question

I need to define for my html page that load a javascript external file only when the variable $scope.jsallowed is set to true, So I tried this code: (My page is based on AngularJS ) In html :

<script src="assets/js/slider.min.js" data-ng-if="jsallowed"></script>

In JS:

$scope.jsallowed = false;

(Note that I set the application and controller and... but I just included codes you need here.) But the problem is, My javascript file loads yet. While it should not. How can I improve my code to prevent loading it until I set jsallowed variable to true?

stackoverflow.com/a/27306744/1132354

Nikhil Aggarwal
– Nikhil Aggarwal

2016-09-12 07:48:46 +00:00
Commented Sep 12, 2016 at 7:48 — Nikhil Aggarwal
– Nikhil Aggarwal, Commented Sep 12, 2016 at 7:48

andreasonny83 · Accepted Answer · 2016-09-12 07:51:01Z

0

Unfortunately that data-ng-if="jsallowed" won't do the trick you're looking for. What you can do, instead, is loading the script asynchronously directly inside your JavaScript file with something like this:

<script>
var resource = document.createElement('script'); 
resource.src = "assets/js/slider.min.js";
var script = document.getElementsByTagName('script')[0];
script.parentNode.insertBefore(resource, script);
</script>

answered Sep 12, 2016 at 7:51

andreasonny83

1,21112 silver badges19 bronze badges

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

7 Comments

Yuriy Dyachkov Over a year ago

How about wrapping this code in directive, doing some whatever magic there? Why downvoted, just curious, because not angular way suggested? Can we play the $injector here, to dynamically add stuff?

andreasonny83 Over a year ago

@user3198882, there is no Angular way to do this trick. Not sure why you down voted my suggestion but I can assure this works and it's quite common to see this syntax around. Also, this is what Google suggests when importing its Analytics library. Of course, you can wrap that inside an Angular directive, I just highlighted the JavaScript code you need to run to do the trick.

Yuriy Dyachkov Over a year ago

It wasn't me, who downvoted, I just asked why someone did it, still interesting to me as well :)

user6767148 Over a year ago

Thank you too much, I tried this in an non-angularjs page and It worked well, I want to know, Will pure javascript codes work in angularjs-based pages as well? UPDATE: I tried it in my AngularJS page and It worked well!

andreasonny83 Over a year ago

That's right, Angular is a JavaScript framework which means you can use pure JavaScript code in any Angular project. Angular just add/extend native JavaScript functionalities to do more with less.

|

Collectives™ on Stack Overflow

Include javascript external file if allowed in AngularJS

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related