Определить вложенный вид - PullRequest
Новая
       8

Определить вложенный вид

0 голосов
/ 03 июня 2018

У меня есть веб-сайт 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.В результате я смогу написать <div ui-view="header"></div> в этих htmls.

Кто-нибудь знает, как изменить мой angularApp.js и, возможно, index.html, чтобы позволить им принять вложенное представление header?

Ответы [ 2 ]

0 голосов
/ 03 июня 2018

Вместо использования 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'
});
0 голосов
/ 03 июня 2018

Обновите код внутри вашего блока конфигурации до: 

$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>

Подписаться Официальные документы

...