AngularJS不会在script标签内编译表达式

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?

Answer 1

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>

Answer 2

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

Answer 3

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));