我想在下面的演示中利用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/

10-12 12:27
查看更多