小编Rod*_*ira的帖子

AngularJS:延迟加载控制器和内容

在这个简化的场景中,我有两个文件: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)

javascript jquery lazy-loading controllers angularjs

24
推荐指数
1
解决办法
6万
查看次数