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

我想通过下面的演示利用ui路由器的父/子状态。该应用程序似乎运行良好(没有控制台错误(，但是 html 不会呈现，并且控制器的 init 函数也没有触发。这种技术是全新的，不确定配置有什么问题。删除抽象状态并正常配置应用程序会导致出现"Hello World"文本。

普伦克

配置.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',
    });
}
})();

索引.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>

登录.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
})

这个模板当然可以更高级，也可以使用模板网址

相关内容

最新更新

热门标签：