Javascript 动态添加AngularJS脚本
我有一个项目,它有一个非常快速的开发周期,这会导致主app.js文件发生很多变化。此文件包含用作项目一部分的AngularJS应用程序的配置和控制器。这就产生了缓存问题,我尝试如下解决:Javascript 动态添加AngularJS脚本,javascript,angularjs,Javascript,Angularjs,我有一个项目,它有一个非常快速的开发周期,这会导致主app.js文件发生很多变化。此文件包含用作项目一部分的AngularJS应用程序的配置和控制器。这就产生了缓存问题,我尝试如下解决: <script type="text/javascript"> var s = document.createElement('script') s.setAttribute('src', 'assets/js/app-v2.js?v='+(new Date().getMillise
<script type="text/javascript">
var s = document.createElement('script')
s.setAttribute('src', 'assets/js/app-v2.js?v='+(new Date().getMilliseconds()));
document.body.appendChild(s);
</script>
我的HTML设置为
<html ng-app="appName">....</html>
因此,我尝试在加载脚本后动态设置ng应用程序,但这也不起作用。给了我和之前一样的问题。我是否可以在加载app-v2.js文件期间或之后动态添加appName?我在stackoverflow中找到了这个答案,当时我正面临同样的问题 bootstrap将为您调用AngularJS编译器,就像ng应用程序一样
// Make module Foo and store $controllerProvider in a global
var controllerProvider = null;
angular.module('Foo', [], function($controllerProvider) {
controllerProvider = $controllerProvider;
});
// Bootstrap Foo
angular.bootstrap($('body'), ['Foo']);
// .. time passes ..
// Load javascript file with Ctrl controller
angular.module('Foo').controller('Ctrl', function($scope, $rootScope) {
$scope.msg = "It works! rootScope is " + $rootScope.$id +
", should be " + $('body').scope().$id;
});
// Load html file with content that uses Ctrl controller
$('<div id="ctrl" ng-controller="Ctrl" ng-bind="msg">').appendTo('body');
// Register Ctrl controller manually
// If you can reference the controller function directly, just run:
// $controllerProvider.register(controllerName, controllerFunction);
// Note: I haven't found a way to get $controllerProvider at this stage
// so I keep a reference from when I ran my module config
function registerController(moduleName, controllerName) {
// Here I cannot get the controller function directly so I
// need to loop through the module's _invokeQueue to get it
var queue = angular.module(moduleName)._invokeQueue;
for(var i=0;i<queue.length;i++) {
var call = queue[i];
if(call[0] == "$controllerProvider" &&
call[1] == "register" &&
call[2][0] == controllerName) {
controllerProvider.register(controllerName, call[2][1]);
}
}
}
registerController("Foo", "Ctrl");
// compile the new element
$('body').injector().invoke(function($compile, $rootScope) {
$compile($('#ctrl'))($rootScope);
$rootScope.$apply();
});
希望它能帮助您缓存问题的本质是什么?文件已更新,但刷新时仍会获得旧版本?如果是这样,我不明白如何动态设置ng应用程序helps@NewDev,出于某种原因,即使该文件在服务器上更新,我在调用它时也会收到一个304 Not Modified标志。好的,但您打算如何使用dynamic ng app解决此问题?@NewDev,我假设我收到的错误是由于在调用js文件之前设置了ng app。如果不是这样的话,我该如何解决我得到的错误,并保持这个添加js文件的版本控制方法呢
// Make module Foo and store $controllerProvider in a global
var controllerProvider = null;
angular.module('Foo', [], function($controllerProvider) {
controllerProvider = $controllerProvider;
});
// Bootstrap Foo
angular.bootstrap($('body'), ['Foo']);
// .. time passes ..
// Load javascript file with Ctrl controller
angular.module('Foo').controller('Ctrl', function($scope, $rootScope) {
$scope.msg = "It works! rootScope is " + $rootScope.$id +
", should be " + $('body').scope().$id;
});
// Load html file with content that uses Ctrl controller
$('<div id="ctrl" ng-controller="Ctrl" ng-bind="msg">').appendTo('body');
// Register Ctrl controller manually
// If you can reference the controller function directly, just run:
// $controllerProvider.register(controllerName, controllerFunction);
// Note: I haven't found a way to get $controllerProvider at this stage
// so I keep a reference from when I ran my module config
function registerController(moduleName, controllerName) {
// Here I cannot get the controller function directly so I
// need to loop through the module's _invokeQueue to get it
var queue = angular.module(moduleName)._invokeQueue;
for(var i=0;i<queue.length;i++) {
var call = queue[i];
if(call[0] == "$controllerProvider" &&
call[1] == "register" &&
call[2][0] == controllerName) {
controllerProvider.register(controllerName, call[2][1]);
}
}
}
registerController("Foo", "Ctrl");
// compile the new element
$('body').injector().invoke(function($compile, $rootScope) {
$compile($('#ctrl'))($rootScope);
$rootScope.$apply();
});