Question

我有一个控制器（弹簧），它返回应用程序版本（＆＃34; version/get＆＃34;）我需要使用此版本来指定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标记/头标记中。

或者尝试动态创建脚本和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();

从服务器获取脚本位置

3 个答案: