How to conditionally include script element in Angular

Question

I'm trying to conditionally include a chat on my page:

<body ng-app="myApp">
  <!-- some code -->

  <script type="text/javascript" ng-if="expression">
    window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
    d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
    _.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
    $.src="//v2.zopim.com/?my-zopim-id";z.t=+new Date;$.
    type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
  </script>
</body>

but it seems that the chat script gets executed before ng-if directive.

How can I make my Angular app to check the condition first and then execute the script from <script> tag?

You can't do it with ng-if you will have to put an if statement in the actual javascript. — Bob Brinks
– Bob Brinks, Commented Sep 8, 2016 at 13:44
How about a very simple <div ng-if="condition" ng-include="file/with/javascript/code.html"></div> — anazimok
– anazimok, Commented Oct 20, 2017 at 18:02

Estus Flask · Accepted Answer · 2016-09-08 14:26:01Z

4

It can be achieved with a trick:

  <script ng-if="..." type="{{ 'text/javascript' }}">
    ...
  </script>

The binding will prevent the script from being executed in normal way.

Notice that the above will work only when jQuery was loaded (prior to Angular), due to the way how Angular's jqLite implementation treats <script> elements.

The cleaner way would be a directive that does the same as <script> above but has safeguards that would prevent it from multiple executions (notice that putting <script> into directive's template has the same requirements on jQuery as the solution above).

edited Sep 8, 2016 at 14:26

answered Sep 8, 2016 at 14:19

Estus Flask

226k79 gold badges477 silver badges619 bronze badges

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

1 Comment

Joao Polo Over a year ago

interesting way

Thomas Theunen · Accepted Answer · 2016-09-08 13:57:50Z

2

Inline Javascript will always have priority over Angular (parsed first by the browser). The best way is to inject/execute the javascript inside your controller with a condition or creating a directive.

answered Sep 8, 2016 at 13:57

Thomas Theunen

1,2749 silver badges13 bronze badges

1 Comment

842Mono Over a year ago

could you explain the solution in more detail?

AnyWhichWay · Accepted Answer · 2018-08-05 12:45:31Z

0

A native and light weight approach, i.e. no jQuery, no-Angular directives, would be to use something like https://github.com/anywhichway/scriptswitch.

answered Aug 5, 2018 at 12:45

AnyWhichWay

7828 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to conditionally include script element in Angular

3 Answers 3

1 Comment

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Linked

Related