在这个简化的场景中,我有两个文件: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>
Run Code Online (Sandbox Code Playgroud)
lazy.htm
myApp.controller('lazy',function($scope){
$scope.lazy = 'Lazy Controller';
});
<div ng-controller="lazy">
{{lazy}}
</div>
Run Code Online (Sandbox Code Playgroud)
结果是一个错误:"Argument'lazy'不是函数,未定义"
改为使用函数
lazy.htm
function lazy($scope) {
$scope.lazy = 'Lazy Controller';
}
<div ng-controller="lazy">
{{lazy}}
</div>
Run Code Online (Sandbox Code Playgroud)
这可以使用到版本1.3 beta 14.在beta 15中删除了全局控制器功能:https://github.com/angular/angular.js/issues/8296
那么现在,动态获取lazy.htm的愤怒内容的更好方法是什么?
更新:
在本文(http://ify.io/lazy-loading-in-angularjs)中,我找到了另一种可能的解决方案.$ controllerProvider允许我们在角度引导之后注册新的控制器.奇迹般有效.在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> …
Run Code Online (Sandbox Code Playgroud)