В этом упрощенном сценарии у меня есть два файла: 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>
В результате возникает ошибка: "Аргумент" ленивый "не является функцией, получил undefined"
Использование функции вместо
lazy.htm
function lazy($scope) {
$scope.lazy = 'Lazy Controller';
}
<div ng-controller="lazy">
{{lazy}}
</div>
Это работает до версии 1.3 beta 14. В бета-версии 15 были удалены функции глобального контроллера: https://github.com/angular/angular.js/issues/8296
Итак, каков лучший способ получить угловое содержимое lazy.htm динамически?
UPDATE:
В этой статье (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>
lazy.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';
};
Но я считаю, что эти два последних примера не должны использоваться в производстве.
