Можно ли вложить ui-view в другой ui-view с помощью ui-router

0

У меня есть сообщение ui-view, в котором я хотел бы вложить другой комментарий ui-view в одно и то же состояние (приложение). Все представления имеют один и тот же контроллер.

Как настроить таргетинг на ui-view (комментарий внутри сообщения ui-view) без использования дочернего состояния. Для дочернего состояния пользователь должен перейти к этому состоянию для просмотра комментариев, я хотел бы, чтобы сообщения и комментарии были видимыми, как только пользователь перешел на домашнюю страницу.

<!-- index.html -->
<div ui-view="post" ng-repeat="post in posts">

</div>


<!-- posts.html -->
 <div class="post">
     <p>{{post.body}}</p>
     <div ui-view="comment" ng-repeat="comment in post.comments">
     </div>
 </div>

<!-- comments.html -->
<div class="comment" >
    <p>{{comment.body}}</p>
</div>


app.config(['$stateProvider',
  function($stateProvider) {
    $stateProvider
      .state("app", {
        url: '/',
        views: {
           'posts@app': {
                    templateUrl: 'views/posts.html',
                    controller: 'PostController',
            }
        }
      })
  }
]);
  • 1
    Вы гуглили "вложенные представления UI Router"? github.com/angular-ui/ui-router/wiki/...
  • 0
    @DavidSpence, я сделал. Я не могу найти вложения взглядов, похожих на мои потребности.
Теги:
angular-ui-router

3 ответа

2

В документах с ui-router вы можете использовать несколько представлений на одной странице или вложенных представлениях. У вас есть 2 вида на одной странице, в которых вам понадобятся несколько именованных видов.

Если вы хотите просмотреть представление внутри представления, вы захотите использовать первую ссылку, где вы можете просто использовать ui-view, но вам нужно поместить второй ui-view в шаблон первого ui-view.

Вы не можете поместить другой ui-view внутри div другого ui-view. Ваш лучший вариант - дать им идентификатор, а затем создать их с помощью css. Или, если вы хотите, скажем, комментарии к сообщению, вы действительно захотите использовать второй, где вы создаете шаблон публикации, а затем разместите на этой странице ui-view на этой странице.

Поделиться
0

Из вашего образца вы просто хотите повторно использовать комментарий html повторно в post html. В этом случае вы просто используете ng-include для включения частичного (комментарий html). См. Ng-include в документах angularjs. Ничего общего с ui-router.

Ваш ui-view отображает сообщение html и включает ваш контроллер. Ваш пост html включает комментарий html повторно.

надеюсь, это поможет

Поделиться
  • 0
    Спасибо за ваш ответ. Я думаю, что это будет работать. Другая идея состоит в том, чтобы использовать 1 состояние с дочерними состояниями, которые не изменяют URL родительских состояний. Затем каждый раз, когда посещается домашняя страница, она переходит в соответствующее дочернее состояние.
0 
 app.config(['$stateProvider',
  function($stateProvider) {
    $stateProvider
      .state("app", {
        url: '/',
        views: {
           'posts@app': {
                    templateUrl: 'views/posts.html',
                    controller: 'PostController',
            }
        }
.state("app.comments", {
        url: '/comments',
        views: {
           'comments@app': {
                    templateUrl: 'views/comments.html',
                    controller: 'CommentsController',
            }
        }
      })
  }
]);
Поделиться
  • 0
    Спасибо за ваш ответ, но, пожалуйста, проверьте мой обновленный вопрос, чтобы получить лучшее представление о том, для чего я снимаю.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню