Как установить <ui-view> по умолчанию в другом <ui-view>

Question

Как установить <ui-view> по умолчанию в другом <ui-view>

0

Так что я пытаюсь выполнить: когда пользователь нажимает на тег a в index.html, который приводит их к состояниям "блогов", то есть main.html, мне нужен элемент ui-view в main.html для автоматического отображения home.html.

Я попытался использовать abstract: true, template: '<ui-view> в состоянии "blogs", а затем предоставить "blogs.home" состояния пустой URL-адрес, чтобы он автоматически отображался, но, к сожалению, это просто делает так, что он заполняет элемент index.html ui-view. Не то, что я хочу.

Я пытаюсь настроить элемент ui-view в main.html, который будет заполнен с помощью home.html по умолчанию.

Любая помощь будет оценена, и я могу прояснить все, что не обязательно имеет смысл в моих объяснениях. Заранее спасибо.

Вот мой макет:

index.html

<body ng-controller="MainController">

<!-- HEADER -->
<div class="header">
   <div class="title">
      <i style="color: white;" class="fa fa-magic fa-2x"></i>&nbsp;
      <h3>
          <span>AngularJS Blog</span>
      </h3>
   </div>
   <div class="nav-bar">
      <div class="nav-div nav-div-one">
         <a ui-sref="blogs"><i class="fa fa-archive fa-2x"></i></a>
      </div>
      <div class="nav-div nav-div-two">
         <a ui-sref="newblog"><i class="fa fa-pencil fa-2x"></i></a>
      </div>
   </div>
</div>

<!-- VIEWS -->
<div ui-view class="main-fade"><div>

main.html

<div class="wrapper"> 
    <div class="blog-container" ng-repeat="post in blog" ng-click="readPost(post._id)" ui-sref=".readblog">  
       <p><i class="fa fa-book"></i>&nbsp;{{ post.title }}</p>
       <p>by {{ post.author }}</p> 
       <p>{{ post.pubdate | date }}</p>
       <br>
       <div>
        <p>{{ post.body }}</p>
       </div>
       <br><br>
       <div style="position: absolute; bottom: 10px; right: 10px;">
          <button id="deletePost" ng-click="deletePost(post._id)">Delete Blog</button>
          <button id="readPost" ng-click="readPost(post._id)" ui-sref=".readblog">Read Blog</button>
       </div>
    </div>
</div>

<div ui-view></div>

home.html

    <div class="home">
        <h1>The place to write stuff down.</h1>
    </div>

app.js

var app = angular.module('blog-app', ['ui.router', 'ngAnimate']);

app.config(function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/blogs/home');

$stateProvider

.state('blogs', {
    url: '/blogs',
    templateUrl: 'views/main.html',
    controller: 'MainController'
})

.state('blogs.home', {
    url: "",
    templateUrl: "views/home.html",
    MainController: "MainController"
})

.state('blogs.readblog', {
    url: "/readblog",
    templateUrl: "views/readblog.html",
    controller: "MainController"
})

.state('newblog', {
    url: '/newblog',
    templateUrl: "views/newblog.html",
    controller: "MainController"
}); 

}); //End Config. OK

Princeton Collins 17 май 2016, в 21:32

Источник

Теги:

javascript

html

angularjs

angular-ui-router

1 ответ

Ещё вопросы

micah · Answer 1 · 2016-05-17T16-41-00.000Z

Для этого вам нужно назвать свои взгляды.

<ui-view name="mainContent"></ui-view>

И в вашем config-

.state('blogs.home', {
    url: '/newblog',
    views: {
        'mainContent@blogs': {
            templateUrl: "views/home.html",
            controller: "MainController"
         }
    }
});

Это сработало. Я получил это, чтобы показать home.html. Но есть ли способ добавить новое представление в этот элемент пользовательского интерфейса, когда я нажимаю кнопку readPost? Потому что теперь это не работает так, как должно. :(
Вы должны всегда указывать свои взгляды на mainContent@blogs если вы хотите заменить это представление