从服务器获取脚本位置

Question

我有一个控制器（spring），它返回应用程序版本（“version/get”），我需要使用这个版本来指定 js 文件的位置：

<script src="/r/{{appVersion}}/js/app.js"></script>

如何使用 javascript 或 angularjs 来做到这一点？

我试图做这样的事情：

module.controller('ResourceLoaderController', [
    '$rootScope', '$scope', '$http',
    function ($rootScope, $scope, $http) {
        'use strict';

        $scope.getVersion = function() {
            $http.get('/version/get').then(function (response) {
                $rootScope.appVer = response.data;
            });
        };

        $scope.getVersion();
    }]);

然后：

<script src="js/controllers/ResourceLoaderController.js"></script>
<div ng-controller="ResourceLoaderController">
    <link rel="stylesheet" type="text/css" href="/r/{{appVer.text}}/css/app.css" charset="utf-8">
    <script src="/r/{{appVer.text}}/js/app.js"></script>
</div>

但我不能在标题中使用<div>...

Answer 1

我认为这可能行得通，

1。有一个script 标签和link 标签，为他们提供特定的ID，

<link rel="stylesheet" type="text/css" href="" charset="utf-8" id="theCSS"> <script src="" id="theScript"></script>

2。修改你的控制器看起来像，

module.controller('ResourceLoaderController', [
    '$rootScope', '$scope', '$http',
    function ($rootScope, $scope, $http) {
        'use strict';

        $scope.getVersion = function() {
            $http.get('/version/get').then(function (response) {
               // $rootScope.appVer = response.data;
               var scriptElement = angular.element(document.querySelector( '#theScript'));
               scriptElement.src = '/r/' + response.data.text +'/js/app.js';
              var cssElement = angular.element(document.querySelector( '#theCSS'));
               cssElement.href = '/r/' + response.data.text +'/css/app.css';
            });
        };

        $scope.getVersion();
    }]);

将ng-controller属性放在html标签/head标签中。

或者尝试动态创建脚本和 css 标签。

Answer 2

在您的 $http 成功中尝试此操作。

// use global document since Angular's $document is weak
var s = document.createElement('script'); 
s.src = '/r/'+response.data.text+'/js/app.js';
document.body.appendChild(s);

它将使用正确的 src 创建一个新的脚本元素。

Angular 仅在页面加载完成后才会处理该网页 在 <script> 标记已被处理一次时构建 （脚本标签只运行一次）。其他标签如img 将 当他们的属性改变屏幕的视觉外观 页面加载后更改......但如前所述，脚本是 仅在页面加载期间和 Angular 之前处理一次，甚至之后 永远可以控制。

所以你需要附加你的脚本标签。或者您可以通过服务器端编码来实现。

Answer 3

您应该像这样动态注入脚本：

$scope.getVersion = function() {
    $http.get('/version/get').then(function (response) {
        $rootScope.appVer = response.data;
        var myScript = document.createElement('script');
        myScript.type ='text/javascript';
        myScript.async ='true';
        myScript.src = window.location.protocol + "//" + window.location.host + "/r/" + response.data + "/js/app.js"
        document.getElementsByTagName('head')[0].appendChild(myScript);
    });
};

$scope.getVersion();