我正在角度应用上使用模块/子模块,我的控制器无法加载在特定路线上,但视图确实如此,根据对此question的评论我应该引用主模块中的子模块,这应该可以解决问题。
这是我引导应用程序的代码:
angular.module('mainApp', ['ui.bootstrap', 'ui.utils', 'ui.router', 'ngResource', 'ngAnimate', 'ngCookies', 'facebook', 'subModule1', 'subModule2', 'subModule3']);
angular.module('mainApp').config(function ($stateProvider, $urlRouterProvider, $locationProvider, FacebookProvider) {
$stateProvider.state("root",
{
url: '',
abstract: true,
views: {
'footer@': {
templateUrl: "/partial/footer/footer.html",
},
'header@': {
templateUrl: "/partial/header/header.html",
}
}
}).state('root.home', {
url: '/index',
views: {
'container@': {
templateUrl: '/partial/index/index.html',
controller: 'IndexCtrl'
}
},
}
).state('root.login', {
url: "/login",
views: {
'container@': {
templateUrl: '/partial/login/login.html',
controller: 'LoginCtrl'
}
},
});
FacebookProvider.init('xxxxxx');
$urlRouterProvider.otherwise('/index');
$locationProvider.hashPrefix('!');
});
我将子模块配置放在名为 /subModule1/submodule1.js
的单独文件夹中angular.module('subModule1').config(function($stateProvider) {
$stateProvider.state("submodule1",
{
url: '',
abstract: true,
views: {
'footer@': {
templateUrl: "/partial/footer/footer.html",
},
'header@': {
templateUrl: "/partial/header/header.html",
}
}
}).state('submodule1.dashboard',
{
url: '/dashboard',
views: {
'container@': {
templateUrl: '/subModule1/partial/dashboard/dashboard.html',
controller: 'DashboardCtrl',
resolve: {
dashboardinfo: function($resource) {
var resourceGet = $resource('/submodule1/dashboard');
return resourceGet.get().$promise;
}
}
},
'sideBar@': {
templateUrl: '/submodule1/partial/sidebar/sidebar.html'
},
'navBar@': {
templateUrl: '/submodule1/partial/navbar/navbar.html'
}
}
});
});
控制器定义为:
angular.module('subModule1').controller('DashboardCtrl', function ($scope, $interval, $resource, notification, dashboardinfo) { ... }
位于页面根目录的索引是页面布局的
<html ng-app="mainApp">
并且控制器具有ng-controller定义如下:
<div ng-controller="DashboardCtrl">
一切都很好,只是控制器没有运行,它不会被视图执行。
答案 0 :(得分:0)
ui-router
和ng-controller="DashboardCtrl"
旨在协同工作。在ui-router
世界中,我们直接在州定义中将Controllers
分配给views
。
所以这个(就像你已经拥有它一样,没有变化)就足够了:
.state('submodule1.dashboard',
{
url: '/dashboard',
views: {
'container@': {
templateUrl: '/subModule1/partial/dashboard/dashboard.html',
controller: 'DashboardCtrl',
说,根据(index.html)在ui-view="container"
内呈现的视图应该由DashboardCtrl
提供。
example使用上述状态定义(尽可能为1:1)。
这是index.html内容:
<div ui-view="header"></div>
<div ui-view="navBar"></div>
<div ui-view="container"></div>
<div ui-view="sideBar"></div>
<div ui-view="footer"></div>
此链接将正确触发上述状态:
// root
<li><a ui-sref="root.home">root.home</a></li>
<li><a ui-sref="root.login">root.login</a></li>
// dashboard
<li><a ui-sref="submodule1.dashboard">submodule1.dashboard</a></li>
所有其他详细信息请检查here