【问题标题】:Angular doesn't load state if I use abstract parent state如果我使用抽象父状态,Angular 不会加载状态
【发布时间】:2015-01-11 12:41:23
【问题描述】:

有如下代码:

angular.module('app', ['app.animators', 'app.events', 'app.hotel', 'app.controllers', 'app.services', 'ui.router', 'templates', 'ngResource', 'ngCookies', 'ui.bootstrap', 'ngImgCrop', 'angularjs-dropdown-multiselect']).config(['$httpProvider', '$locationProvider', '$stateProvider', '$urlRouterProvider', ($httpProvider, $locationProvider, $stateProvider, $urlRouterProvider) ->
  $httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')

  $urlRouterProvider.otherwise("/404")

  $stateProvider.state('signIn'
    url: '/admin/signin'
    controller: 'SignInController'
    templateUrl: 'signin.html'
  )

  $locationProvider.html5Mode(true)
])

效果很好,但我将其更改为以下代码:

angular.module('app', ['app.animators', 'app.events', 'app.hotel', 'app.controllers', 'app.services', 'ui.router', 'templates', 'ngResource', 'ngCookies', 'ui.bootstrap', 'ngImgCrop', 'angularjs-dropdown-multiselect']).config(['$httpProvider', '$locationProvider', '$stateProvider', '$urlRouterProvider', ($httpProvider, $locationProvider, $stateProvider, $urlRouterProvider) ->
  $httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')

  $urlRouterProvider.otherwise("/404")

  $stateProvider.state('admin.signIn'
    url: '/admin/signin'
    controller: 'SignInController'
    templateUrl: 'signin.html'
  ).state('admin'
    abstract: true
  )

  $locationProvider.html5Mode(true)
])

它不起作用,即我输入地址'http://localhost/admin/signin',浏览器正在加载,但我没有得到'signin.html'模板。我需要使用“管理”状态才能对所有子状态使用“解决”功能(我的示例不完整)。有什么问题?提前致谢!

【问题讨论】:

    标签: angularjs angular-ui-router


    【解决方案1】:

    几乎每个父母都应该有一个模板——该模板将成为其孩子的目标。有a working plunker

    因此,只需将此行添加到父定义中:template: "<div ui-view></div>" - 将使该代码正常工作:

    .state('admin', {
      abstract: true,
      template: "<div ui-view></div>"
    })
    

    发生的事情是 - 孩子确实有它的目标,它可以被注入的锚点。

    可能还有其他解决方案,例如孩子的目标是根ui-view="" ...但上述解决方案是合适的...请参阅View Names - Relative vs. Absolute Names,检查此答案及其plunker以及absolute name targeting的更多示例

    在行动中检查它here

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-08-31
      • 1970-01-01
      • 1970-01-01
      • 2021-10-08
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多