AngularJS doesn't compiles expressions inside the script tag

Question

I try to compile HTML template with <script>..</script> inside the file, but AngularJS compiler doesn't compile all expressions within <script> tag.

My controller:

.controller('showChannelController', function ($scope, $http, $stateParams, $compile, $templateRequest) {
        $http.get("http://localhost/show?id=" + $stateParams.id)
            .then(function (response) {
                $scope.info = response.data.data;
                $templateRequest('application/script.html').then(function(template) {
                    $('body').append($compile(template)($scope));
                });
            });
    });

And my application/script.html template looks like:

<script>
$(function() {
        // Load Player
        var player = new Clappr.Player({
            source: "{{source_url}}",
            parentId: "#player",
            autoPlay: true,
            width: 962,
            height: 540,
        });
});
</script>

Is it possible resolve this issue without include backend?

If the script is inside ng-view, you should call Jquery before AngularJS in your index.html file. Btw this must be a duplicate — Alburkerk, Mar 09 '17 at 12:26
The script is located in `application/script.html`. Can you give me an example? — Ruslan Skaldin, Mar 09 '17 at 12:30
But yes of course as estus precised, it is not the Angular way to do it. :) See here some examples https://www.w3schools.com/angular/angular_directives.asp — Alburkerk, Mar 09 '17 at 12:56

score 1 · Answer 1 · answered Apr 14 '17 at 08:35

Dont use the brackets. Use the variable. It should work straight forward. Pass the value of variable using say $rootScope. Here $rootScope is used since it is common across all application.

Here is the example.

angular.module('tss.application').controller('VideoController',function($log, $rootScope, $scope, $window ) {

    var player = new Clappr.Player({
                                    source:  $rootScope.vp, 
                                    parentId: "#player", 
                                    autoPlay: true
                                    });

});

I use this controller inside video_modal.html --- This is a popover modal in which player opens. The source of the video is dynamic as per the user click/choice.

<div ng-controller="VideoController">
  <div id="player"></div>   
</div>

score 0 · Accepted Answer · edited May 23 '17 at 12:25

It is possible to use <script> tags in templates with this workaround or by having jQuery loaded (it replaces Angular jqLite implementation and treats script nodes differently).

But it is not possible to use Angular expressions in scripts. It would be a huge security breach, because this would require to execute arbitrary code with eval.

It can be a directive that contains the code above.

app.directive('player', () => ({
  scope: { url: '@' },
  link: (scope, element, attrs) => {
    scope.id = Math.round(Math.random()*10e4);
    attrs.$set('id', 'player-' + scope.id);

    scope.instance = new Clappr.Player({
      source: scope.url,
      parentId: '#' + scope.id,
      ...
    });
  }
}));

It depends on how Clappr.Player allows to provide parent element. If it accepts DOM element as a parent, $element[0] could be provided instead of `parentId

score 0 · Answer 3 · answered Mar 09 '17 at 18:08

0

Implement backend version, just generates script with all needed parameters on the server side and transfer complete script to AngularJS. Then apply received data in the AngularJS controller.

$('body').append($compile(response.data.script)($scope));

answered Mar 09 '17 at 18:08

Ruslan Skaldin

981
16
29

AngularJS doesn't compiles expressions inside the script tag

3 Answers3