相关疑难解决方法(0)

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

lazy.htm

myApp.controller('lazy',function($scope){
    $scope.lazy = 'Lazy Controller';
});
<div ng-controller="lazy">
    {{lazy}}
</div>

结果是一个错误:"Argument'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的愤怒内容的更好方法是什么？

更新:

在本文(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> …

尝试使用requirejs实现延迟加载.当我不使用图表时,一切都很好.但是,当我想使用图表(角度图表),而不是成功!使用带有角度图表的chart.js.

这是main.js:

 require.config({ 
baseUrl: "http://localhost/ums/angular/js",
    paths: {
        'angular': 'lib/angular.min',
        'ngRoute': 'lib/angular-route.min',
        'flash': 'lib/angular-flash',
        'angular-loading-bar': 'lib/loading-bar.min',
        'ngAnimate': 'lib/angular-animate.min',
        'ui.bootstrap': 'lib/ui-bootstrap-tpls-0.12.0',
        'uniqueField': 'admin/directives/angular-unique',
        'input_match': 'admin/directives/angular-input-match',
        'uniqueEdit': 'admin/directives/angular-unique-edit',
        'angularAMD': 'lib/angularAMD.min',
        'chart.js': 'lib/Chart.min', 
        'angular-chart':'lib/angular-chart.min',   
        'app': 'admin/app',
        },
        waitSeconds: 0,
         shim: { 
         'angular': { exports: 'angular'},
        'angularAMD': { deps: ['angular']},
        'angular-chart': { deps: ['angular','chart.js']},
        'ngRoute':{ deps: ['angular']},
        'angular-loading-bar':{ deps:['angular'] },
        'ngAnimate': { deps:['angular'] } ,
        'ui.bootstrap': {deps: ['angular'] },
        'uniqueField': {deps: ['angular'] },
        'input_match': {deps: ['angular'] },
        'uniqueEdit': …