我想在下面的演示中利用ui路由器的父/子状态。该应用似乎运行良好(没有控制台错误),但是html不会呈现,并且控制器的init函数也未触发。此技术是全新的,不确定配置有什么问题。删除抽象状态并正常配置应用程序会导致显示“ Hello World”文本。
Plunker
config.js
(function() {
'use strict'
var app = angular.module('app.core');
app.config(AppRouter);
AppRouter.$inject = ['$stateProvider', '$urlRouterProvider'];
function AppRouter($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('main', {
url: '',
abstract: true
})
.state('main.login', {
url: '/login',
templateUrl: 'login.html',
controller: 'LoginController',
controllerAs: 'vm',
});
}
})();
index.html
<body ng-app="app">
<div ui-view=""></div>
<script src="app.module.js"></script>
<script src="app.route.js"></script>
<script src="core.module.js"></script>
<script src="config.js"></script>
<script src="login.module.js"></script>
<script src="login.controller.js"></script>
</body>
login.html
<p>Hello World!</p>
login.controller.js
(function() {
'use strict';
var app = angular.module('app.login');
app.controller('LoginController', LoginController);
LoginController.$inject = ['$location', '$filter', '$window', '$rootScope'];
function LoginController($location, $filter, $window, $rootScope) {
var init = function(){
console.log('here');
};
init();
}
})();
最佳答案
每个嵌套状态都需要在其父模板中加载<ui-view>
。
只需从以下位置更改抽象状态:
.state('main', {
url: '',
abstract: true
})
至:
.state('main', {
url: '',
template:'<ui-view>',
abstract: true
})
当然,此模板可以更高级,也可以使用templateUrl
关于javascript - 嵌套状态不会呈现html或初始化 Controller ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43399610/