如何引用在angularjs一个子模块内的控制器 [英] how to reference a controller inside a sub-module in angularjs
问题描述
我使用的角度应用模块/子模块，我的控制器不加载特定路线上，但该观点并根据这个<一个评论href=\"http://stackoverflow.com/questions/15558890/reference-controller-which-is-inside-a-module\">question我要引用子模块的主要模块内部，而且应该做的伎俩。
I'm using modules /sub modules on the angular app, my controller doesn't load on a specific route but the view does, according to a comment on this question I should reference the child module inside the main module and that should do the trick.
这是我的code提供引导应用程序：
this is my code for bootstrapping the app:
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'
}
}
});
});
控制器被定义为：
the controller is defined as:
angular.module('subModule1').controller('DashboardCtrl', function ($scope, $interval, $resource, notification, dashboardinfo) { ... }
位于页面的根索引是页面布局具有
the index located on the root of the page which is the page layout have the
<html ng-app="mainApp">
和控制器有NG控制器definiton如下：
and the controller have the ng-controller definiton as follows:
<div ng-controller="DashboardCtrl">
一切都很好，只是控制器不运行时，它不会被认为执行。
Everything is fine just the controller isn't running, it doesn't get executed by the view.
推荐答案
的 UI路由器和 NG-控制器=DashboardCtrl是为了一起工作。在 UI路由器的世界，我们正在分配控制器到的意见直接在状态定义。
The ui-router and ng-controller="DashboardCtrl" are intended to work together. In the ui-router world we are assigning Controllers to views directly in the state definition.
所以这个的（完全是你已经拥有它，没有变化）的就足够了：
So this (exactly as you have already have it, no change) is enough:
.state('submodule1.dashboard',
{
url: '/dashboard',
views: {
'container@': {
templateUrl: '/subModule1/partial/dashboard/dashboard.html',
controller: 'DashboardCtrl',
说，该用户界面视图=容器内呈现根视图的（的index.html）的应该是提供 DashboardCtrl 。
to say, that the view rendered inside of the ui-view="container" on the root (index.html) should be provided with DashboardCtrl.
有一个
There is an example using the above state definition (1:1 as possible).
这是index.html的内容：
This is the index.html content:
<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>
和这个链接将正确触发上述状态：
And this links will correctly trigger the above states:
// 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>
所有其他细节检查这里
这篇关于如何引用在angularjs一个子模块内的控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
