【发布时间】：2014-08-06 19:28:35
【问题描述】：
在这个简化的场景中，我有两个文件：index.htm、lazy.htm。
index.htm:
var myApp = angular.module('myApp', []);
myApp.controller('embed',function($scope){
$scope.embed = 'Embedded Controller';
});
<div ng-controller="embed">{{embed}}</div>
<div ng-include="'lazy.htm'"></div>
懒惰的.htm
myApp.controller('lazy',function($scope){
$scope.lazy = 'Lazy Controller';
});
<div ng-controller="lazy">
{{lazy}}
</div>
结果是错误：“Argument 'lazy' is not a function, got undefined”
使用函数代替
懒惰的.htm
function lazy($scope) {
$scope.lazy = 'Lazy Controller';
}
<div ng-controller="lazy">
{{lazy}}
</div>
这在 1.3 beta 14 之前有效。在 beta 15 中删除了全局控制器功能：https://github.com/angular/angular.js/issues/8296
那么现在，动态获取lazy.htm 的角度化内容的更好方法是什么？
更新：
在这篇文章 (http://ify.io/lazy-loading-in-angularjs) 中，我找到了另一种可能的解决方案。 $controllerProvider 允许我们在 angular bootstrap 之后注册新的控制器。奇迹般有效。在 v1.3.0-beta.18
中测试index.htm:
var myApp = angular.module('myApp', [])
.controller('embed',function($scope){
$scope.embed = 'Embedded Controller';
})
.config(function($controllerProvider) {
myApp.cp = $controllerProvider;
});
<div ng-controller="embed">{{embed}}</div>
<div ng-include="'lazy.htm'"></div>
懒惰的.htm
myApp.cp.register('lazy',function($scope){
$scope.lazy = 'Lazy Controller';
});
<div ng-controller="lazy">
{{lazy}}
</div>
更新 2：
另外两个可行的选择是：
懒惰的.htm
_app = $('[ng-app]').scope();
_app.lazy = function($scope) {
$scope.lazy = 'Lazy Controller';
};
或
var $rootScope = $('[ng-app]').injector().get('$rootScope');
$rootScope.lazy = function($scope) {
$scope.lazy = 'Lazy Controller';
};
但我认为最后两个示例不应在生产中使用。
【问题讨论】：
-
我还发现 requirejs 很难与其他库一起使用，反之亦然。这就是为什么我创建了一个更易于使用并使用 Angular 进行测试的库。底部有一个演示应用程序：gngeorgiev.github.io/Modulerr.js 您也可以将所有脚本合二为一，而不依赖于 Modulerr.js
-
这个问题给了我一生中最美好的时刻之一。通过简单地使用
$controllerProvider，现在我可以拥有self-contained 的客户端代码。即 HTML + JS 在一个文件中。 -
可以使用requireJs和ocLazyload来动态加载文件和注入模块。参考文章codeproject.com/Articles/1039826/…
-
在此处尝试 ocLazyload 示例应用 freakyjolly.com/how-to-lazy-load-modules-controllers-angularjs
标签： javascript jquery angularjs lazy-loading controllers