我在angular应用程序上使用模块/ sub模块,我的控制器未在特定路径上加载,但视图却加载了,根据对此问题的评论,我应该在主模块内引用子模块,并且应该诡计。
这是我引导应用程序的代码:
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">
一切都很好,只是控制器没有运行,也没有被视图执行。
在ui-router
和ng-controller="DashboardCtrl"
旨在协同工作。在ui-router
世界上,我们直接在状态定义中分配Controllers
给views
。
因此,这(就像您已经拥有的一样,没有任何更改)就足够了:
.state('submodule1.dashboard',
{
url: '/dashboard',
views: {
'container@': {
templateUrl: '/subModule1/partial/dashboard/dashboard.html',
controller: 'DashboardCtrl',
也就是说,ui-view="container"
在根(index.html)上呈现在内部的视图应提供DashboardCtrl
。
有一个使用上述状态定义的示例(尽可能为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>
所有其他详细信息在这里检查
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句