在这个简化的场景中，我有两个文件：index.htm和lazy.htm。
index.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>
结果出现错误："参数'lazy'不是函数，得到了未定义"
使用函数替代
lazy.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的angular化内容有更好的方法吗？
更新：
在这篇文章中（http://ify.io/lazy-loading-in-angularjs），我发现了另一种可能的解决方案。$controllerProvider允许我们在angular启动后注册新的控制器。非常有效。已通过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：
另外两个可行的选择是：
lazy.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';
};
但我认为这最后两个例子不应在生产中使用。
$controllerProvider，现在我可以拥有自包含的客户端代码片段。也就是说，HTML和JS在一个文件中。 - Saeed Neamati