如何在 AngularJS 中绑定 <script> 元素的 src 属性

Question

我正在尝试将 HTML <script> 元素的 src 属性绑定到我的角度控制器中的一个变量，以便我可以从控制器更新它而无需处理任何 UI。

到目前为止，我已经尝试了所有这些选项：

<script type="text/javascript" ng-src="{{sourceUrl}}"></script>
<script type="text/javascript" src="{{sourceUrl}}"></script>
<script type="text/javascript" ng-src="sourceUrl"></script>

在我的控制器中，我有：

$scope.sourceUrl = "https://<some url goes here>";

在 $scope.sourceUrl 设置后在浏览器中运行页面时，没有对 sourceUrl 的传出请求，所以我确定我做错了什么。有什么想法吗？

我发现了几篇关于<img> 元素的src 属性的帖子，ng-src 应该像他们说的那样工作，但我猜<script> 有点不同。

Answer 1

使用 AngularJS 指令的解决方案。

function dynamicScript () {
    return {
        restrict: 'E',
        scope: {
            dynamicScriptSrc: '='
        },
        link: function(scope, element, attrs, ngModel) {
            setScriptSrc(element, scope.$eval(attrs.dynamicScriptSrc));

            scope.$watch('dynamicScriptSrc', src => {
                setScriptSrc(element, src);
            });
        }
    }
}

function setScriptSrc(element, src) {
    if(src) {
        var newScript = document.createElement("script");
        newScript.type = 'text/javascript';
        newScript.src = src;
        element.empty();
        element.append(newScript);
    }
}

用法：

<dynamic-script dynamic-script-src="vm.dynamicJsPath"></dynamic-script>

Answer 2

@Kolban 是对的，无论如何你可以尝试创建脚本元素，添加 src 属性，然后将其附加到模板中。 例如：

 var exampleController = function() {
 controller.exampleController= [ '$sce',function($sce) {

     //Remember to set the src as a trusted src

     var trustedSrc = $sce.getTrustedUrl("www.example.com");

     var scriptElement = document.createElement('script');

     //Add attributes 

     scriptElement.setAttribute("data-size", '1220x700' );
     scriptElement.setAttribute("src", trustedSrc);


     //Append the srcipt to some element in the template

     var elementContainer = angular.element('#elementToAppend');
     elementContainer.append(scriptElement);
 }]

return controllers;
}

Answer 3

我知道答案来晚了，但这里有一个优雅而简单的解决方案：

您必须通过 $sce.trustAsResourceUrl(value) 使用脚本上下文转义。

见Documentation

它可能看起来像：

在 app.js 中：

//Dynamic Url for Tagging
    $rootScope.exUrl1 = $sce.trustAsResourceUrl(confserver.example.url);

在 index.html 中：

<script type="text/javascript" src="{{exUrl1}}"></script>

脚本标签的src 属性将绑定到它在Angular 中的值。 这是我运行我的 web 应用程序并启动调试器以检查呈现的 HTML 时的结果：

<script type="text/javascript" src="http://exampleUrl.js"></script>

请注意，如果在第一次加载标签后完成绑定，脚本将不会被执行！

Answer 4

您可以从控制器内将其动态添加到正文的末尾：

        $("<script>").attr({src: $scope.sourceUrl}).appendTo("body");

Answer 5

根据@Jonathan 的建议添加我的解决方案作为答案。

(function (ng) {

    // Retrieve main app module
    var appModule = angular.module('appModule');

    // This directive appends a child <script> element to an element with 'my-container' attribute.
    // This is needed for 'src' attribute generation and script evaluation of some object after the
    // page has been loaded.
    appModule.directive('myContainer', ['$log', 'MvcModelService', function ($log, MvcModelService) {
        return {
            restrict: 'A',
            scope: false,
            link: function (scope, elem, attrs) {
                var s = document.createElement("script");
                s.type = "text/javascript";

                var JSObjectName = "JSObject";

                // Just a random number ...
                var randomNumber = Math.floor(Math.random() * Number.MAX_VALUE);

                // flowId is a UUID representing current session.
                var flowId = MvcModelService.FlowId;

                // Construct the url  where the object contents will be loaded from:
                var Url = MvcModelService.UrlPrefix + "Get" + whatever + "/" + JSObjectName +
                          "someOtherStuffDepending on flowId and randomNumber";

                s.src = Url;

                $log.info("Adding script element to MyContainer with source url: " + Url);
                elem.append(s);
            }
        };
    }]);
}(angular));

视图sn-p如下：

<div id="JSObjectScript" style="display: inline" my-container />

Answer 6

虽然脚本标签只能插入一次，你可以添加更多的脚本标签。

<script ng-repeat="script in scripts" ng-src="{{script.src}}"></script>

在您的控制器中，只需将更多对象（如 {src: 'foo.js'}）推送到脚本数组和延迟加载的脚本。

这里有一个 Plunker 演示了这一点：http://plnkr.co/edit/6QuwuqsGoyrASk8FKmu2?p=preview

Answer 7

很遗憾，您不能以这种方式使用 Angular。 Angular 仅在页面加载和构建后处理网页，此时 <script> 标记已被处理一次（脚本标记只运行一次）。其他标签（例如img）会在页面加载后其属性发生变化时改变屏幕的视觉外观......但如前所述，脚本仅处理一次，即使在页面加载期间也是如此在 Angular 获得控制权之前。