我是 Angular、ui-router 和 generator-ng-poly 的新手并希望有人可以帮助解决可能是简单语法问题。
我正在为一个新项目使用 generator-ng-poly,并使用 ui-router 和 HTML 从“深度示例”开始使用基于 Angular 1.3 的应用程序。
首先,我创建了一个“home”模块,然后在其中创建了一个“header”模块。所以……
yo ng-poly:module home
yo ng-poly:module home/header
这给了我这两个 Controller : 应用程序/home/home.js
(function () {
'use strict';
/* @ngdoc object
* @name home
* @requires $stateProvider
*
* @description
*
*/
angular
.module('home', [
'ui.router',
'home.header'
]);
angular
.module('home')
.config(config);
function config($stateProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home/home.tpl.html',
controller: 'HomeCtrl',
controllerAs: 'home'
});
}
})();
和 应用程序/home/header/header.js
(function () {
'use strict';
/* @ngdoc object
* @name home.header
* @requires $stateProvider
*
* @description
*
*/
angular
.module('home.header', [
'ui.router'
]);
angular
.module('home.header')
.config(config);
function config($stateProvider) {
$stateProvider
.state('header', {
url: '/header',
templateUrl: 'home/header/header.tpl.html',
controller: 'HeaderCtrl',
controllerAs: 'header'
});
}
})();
现在我想使用 home.tpl.html 中的“header”,我正在为如何做到这一点而苦苦挣扎。据我了解
<div ui-view=“header”></div>
或
<div ui-view=“home.header”></div>
应该可以。但两者都不是。数小时的谷歌搜索没有帮助,因为所有示例都使用更常见的 $stateProvider 格式,其中有如下链接状态:
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home/home.tpl.html',
controller: 'HomeCtrl',
controllerAs: 'home'
})
.state('home.header', {
url:'/header',
templateUrl: 'home/header/header.tpl.html',
controller: 'header/header-controller.js',
controllerAs: 'header'
});
我应该如何引用“标题”以使其在 home.tpl.html 中正确显示?
最佳答案
为了能够在home
状态下使用header
状态,它们将需要嵌套(链接)。您的应用程序一次只能处于一种状态,但嵌套状态需要允许您所需的使用。
因此,这并不明显,但由于注册的工作方式(重点是我的),您可以在单独的文件/配置中安全地将一个状态设为另一个状态的父级:
If you register only a single state, like
contacts.list
, you MUST define a state calledcontacts
at some point, or else no states will be registered. The statecontacts.list
will get queued untilcontacts
is defined. You will not see any errors if you do this, so be careful that you define the parent in order for the child to get properly registered. - Nested States
此外,ui-view
属性并未采用您在示例中显示的所需状态的名称。它正在创建一个命名 View (一个非常强大的功能 - Multiple Named Views ),但您可能还不需要它。就这样离开:
<div ui-view></div>
因此,要将应用程序设置为正确的状态,请使用 $state.go()
函数:例如
$state.go('home');
关于javascript - Angular 1.3 + ui-router + generator-ng-poly 嵌入嵌套(?) View 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28800011/