Question

我有一个AngularJS的网站，index.html有

<body>
    <ui-view ng-cloak></ui-view>
</body>

在angularApp.js：

app.config(['$stateProvider', function ($stateProvider) {
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: '/htmls/home.html',
            controller: 'MainCtrl'
        }
        .state('help', {
            url: '/help',
            templateUrl: '/htmls/help.html',
            controller: 'HelpCtrl'
        }   
}])

在home.html和help.html（以及其他页面）中，我总是在页面顶部有一个相同的导航栏。所以我想避免重复代码并创建/htmls/header.html和控制器NavCtrl。因此，我将能够在这些htmls中编写<div ui-view="header"></div>。

是否有人知道如何修改我的angularApp.js和index.html以让他们接受嵌套的header视图？

Answer 1

将配置块中的代码更新为：

$stateProvider      
  .state('home',{       
    views: {        
      'header': {       
        templateUrl: '/htmls/header.html',      
        controller: 'NavCtrl'
      },        
      'content': {      
        templateUrl: '/htmls/home.html',        
        controller: 'MainCtrl'
      }     
    }       
  })
  .state('help',{       
    views: {        
      'header': {       
        templateUrl: '/htmls/header.html',      
        controller: 'NavCtrl'
      },
      'content': {      
        templateUrl: '/htmls/help.html',        
        controller: 'HelpCtrl'  
      }     
    }       
  })

在index.html中使用如下所示，现在home.html，help.html只能包含没有标题html的内容

<body>
    <div ui-view="header"></div>
    <div ui-view="content"></div>
</body>

关注Official docs

Answer 2

不使用ui-view，而是使用组件：

̶<̶d̶i̶v̶ ̶u̶i̶-̶v̶i̶e̶w̶=̶"̶h̶e̶a̶d̶e̶r̶"̶>̶<̶/̶d̶i̶v̶>̶
<my-header></my-header>

JS

app.component("myHeader", {
    templateUrl: '/htmls/header.html',      
    controller: 'NavCtrl'
});

定义嵌套视图

2 个答案: