Question

我想通过下面的演示利用ui-routers父/子状态。该应用程序似乎运行正常（没有控制台错误），但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();
  }
  })();

Answer 1

每个嵌套状态都需要在其中加载<ui-view>父模板。

只需改变您的抽象状态：

.state('main', {
        url: '',
        abstract: true
})

要：

.state('main', {
        url: '',
        template:'<ui-view>',
        abstract: true
})

此模板当然可以更高级，也可以使用templateUrl

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

1 个答案: