Question

我尝试使用ui-router在不同的布局之间切换

  $urlRouterProvider.otherwise('/');

  $stateProvider
    .state('root', {
      url: '/',
      views: {
        '@': {
          templateUrl: '_columnsTwo.html'   // 2 columns
        },
        'main@root': {
          templateUrl: 'content1.html',
          controller: 'homeCtrl'
        }
      }
    })
    .state('data', {
      url: '/du-lieu',
      parent: 'root',
      views: {
        'main': {
          templateUrl: 'content2.html',
          controller: 'dataCtrl'
        }
      }

    })
    .state('oneCol', {
      url: '/chi-tiet-tin',
      views: {
        '@': {
          templateUrl: '_columnsOne.html'   // one column layout
        },
        'detail@oneCol': {
          templateUrl: 'contentOneCol.html'
        }
      }    
    })    
});

完整代码位于http://plnkr.co/edit/wGU6PaPAloCm33TDoGso?p=preview

不知道为什么国家oneCol不起作用。

Answer 1

在这种情况下，它通常是拼写错误，请检查此更新的plunker：http://plnkr.co/edit/GygQZxEHogqcRS8vf1Bc?p=preview

templateUrl: 'contentOneCol.html' 正在调用模板 - 该模板不存在：

.state('oneCol', {
  url: '/chi-tiet-tin',
  views: {
    '@': {
      templateUrl: '_columnsOne.html'   // one column layout
    },
    'detail@oneCol': {
      templateUrl: 'contentOneCol.html' // this file was not there
    }                                   // there was one with suffix '.hml'
  }    
})

因为plunker中的文件名为

contentOneCol.hml  // missing t
contentOneCol.html // correction I made

使用角度ui-router切换布局

1 个答案: