控制器已加载 DOM 但视图未加载且无法找到控制器 - oclazyload with jade(pugjs)
Controller is loaded in DOM but the view not loaded and can't find controller- oclazyload with jade(pugjs)
我正在为我的项目使用 angular 1.6,并使用 angular-ui-routing 使用 PugJs 为 HTML 模板进行路由。
我正在尝试在我的应用程序中实现 Lazyload,但不知何故它不起作用可能是由于 jade。
代码:
var app = angular.module('myApp',['ui.router','oc.lazyLoad']);
app.config(['$ocLazyLoadProvider', function($ocLazyLoadProvider
{
$ocLazyLoadProvider.config({
debug: true,
modules: [{
name: 'js',
files: ['js/*']
}]
});
}]);
.state("exampleState", {
url: '/example',
templateUrl: '/example',
controller:'exampleCtrl',
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
files: ['/js/exampleCtrl.js']
})
}]
}
})
控制器:
app.controller('exampleCtrl',function($scope){
console.log('controller loaded');
});
并且在前端我正在使用节点将这些玉石转换为 HTML,因此当路由服务访问 'templateUrl' 时,它将被重定向到此代码:
app.get('/example', function(req, res) {
res.render('/example');
});
这会加载视图中的 example.jade。
我在控制台中得到这个
[$controller:ctrlreg] The controller with the name 'exampleCtrl' is not registered.
即使控制器文件加载到 DOM 中,视图也不会呈现。欢迎任何有关问题的帮助。谢谢
我认为你应该做一些不同的事情。试试这个:
$stateProvider.state('exampleState', {
url: "/example",
views: {
"exampleLazyLoadView": {
controller: 'exampleCtrl',
templateUrl: '/example.html'
}
},
resolve: { // Any property in resolve should return a promise and is executed before the view is loaded
loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load('/js/exampleCtrl.js');
}]
}
});
经过多次搜索和尝试,我找到了解决方案,问题是构建控制器时模块的全局变量。而不是使用
app.controller('exampleCtrl',function($scope){
console.log('controller loaded');
});
我用了angular.module('myApp').controller(,,,);
我正在为我的项目使用 angular 1.6,并使用 angular-ui-routing 使用 PugJs 为 HTML 模板进行路由。 我正在尝试在我的应用程序中实现 Lazyload,但不知何故它不起作用可能是由于 jade。 代码:
var app = angular.module('myApp',['ui.router','oc.lazyLoad']);
app.config(['$ocLazyLoadProvider', function($ocLazyLoadProvider
{
$ocLazyLoadProvider.config({
debug: true,
modules: [{
name: 'js',
files: ['js/*']
}]
});
}]);
.state("exampleState", {
url: '/example',
templateUrl: '/example',
controller:'exampleCtrl',
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
files: ['/js/exampleCtrl.js']
})
}]
}
})
控制器:
app.controller('exampleCtrl',function($scope){
console.log('controller loaded');
});
并且在前端我正在使用节点将这些玉石转换为 HTML,因此当路由服务访问 'templateUrl' 时,它将被重定向到此代码:
app.get('/example', function(req, res) {
res.render('/example');
});
这会加载视图中的 example.jade。 我在控制台中得到这个
[$controller:ctrlreg] The controller with the name 'exampleCtrl' is not registered.
即使控制器文件加载到 DOM 中,视图也不会呈现。欢迎任何有关问题的帮助。谢谢
我认为你应该做一些不同的事情。试试这个:
$stateProvider.state('exampleState', {
url: "/example",
views: {
"exampleLazyLoadView": {
controller: 'exampleCtrl',
templateUrl: '/example.html'
}
},
resolve: { // Any property in resolve should return a promise and is executed before the view is loaded
loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load('/js/exampleCtrl.js');
}]
}
});
经过多次搜索和尝试,我找到了解决方案,问题是构建控制器时模块的全局变量。而不是使用
app.controller('exampleCtrl',function($scope){
console.log('controller loaded');
});
我用了angular.module('myApp').controller(,,,);