Question

我尝试在文件中编译带有<script>..</script>的HTML模板，但AngularJS编译器不会编译<script>标记内的所有表达式。

我的控制器：

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

我的application/script.html模板如下：

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

是否可以在不包含后端的情况下解决此问题？

Answer 1

不要使用括号。使用变量。它应该直接工作。使用say $ rootScope传递变量的值。这里使用$ rootScope，因为它在所有应用程序中都很常见。

以下是示例。

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

我在video_modal.html中使用这个控制器---这是一个弹出模式，玩家可以在其中打开。根据用户点击/选择，视频源是动态的。

    foreach ($originalArray as $subArray) {
    $i = 0;
    foreach ($subArray['filename'] as $filePath) {
        $filePath = //do your path thing here
        $subArray['filename'][$i] = $filePath;
        $i++;
    }
}

Answer 2

可以在this workaround的模板中使用<script>标记，或者加载jQuery（它取代Angular jqLite实现并以不同方式处理脚本节点）。

但是在脚本中不可能使用Angular表达式。这将是一个巨大的安全漏洞，因为这需要使用eval执行任意代码。

它可以是包含上述代码的指令。

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,
      ...
    });
  }
}));

这取决于Clappr.Player允许提供父元素的方式。如果它接受DOM元素作为父元素，则可以提供$element[0]而不是`parentId

Answer 3

实现后端版本，只需在服务器端生成包含所有必需参数的脚本，并将完整脚本传输到AngularJS。然后在AngularJS控制器中应用接收的数据。

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

AngularJS不编译脚本标记内的表达式

3 个答案: