嵌套状态不会呈现html或初始化控制器

问题描述：

我想在下面的演示中利用ui-routers父/子状态。该应用似乎运行良好（无控制台错误），但HTML不会呈现，并且控制器的init函数也不会触发。这个技术是全新的，不知道配置有什么问题。正常移除抽象状态并配置应用程序会导致出现“Hello World”文本。嵌套状态不会呈现html或初始化控制器

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

此外，嵌套的状态可以加载任何'ui-view'使用命名视图 https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views – Ladmerc

嵌套状态不会呈现html或初始化控制器

相关推荐