3

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?

user6767148
  • 89
  • 1
  • 9

1 Answers1

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>
andreasonny83
  • 1,213
  • 11
  • 19
  • 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? – Yuriy Dyachkov Sep 12 '16 at 07:58
  • @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. – andreasonny83 Sep 12 '16 at 08:02
  • It wasn't me, who downvoted, I just asked why someone did it, still interesting to me as well :) – Yuriy Dyachkov Sep 12 '16 at 08:04
  • 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! – user6767148 Sep 12 '16 at 08:06
  • 1
    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. – andreasonny83 Sep 12 '16 at 08:11
  • So I can put into my `` something like this ``, then watch `ng-if` expression in `myScript` directive and do like `$element[0].parentNode.insertBefore(resource, $element[0])`, sorry for non-angular DOM manips. No magical quirks, if do this way? – Yuriy Dyachkov Sep 12 '16 at 08:13
  • No, Angular cannot control directives present in the head of the document, only inside the body. However, you can use that directive before closing your

    tag in the page and the result will be the same. When you include a script inside the

    , the broweser will load and run that script before the page is ready. If you include an Angular syntax in there your browser will not recognize that code at that point.

     – andreasonny83 Sep 12 '16 at 08:29