Проблема с угловым ui-адресом

Question

У меня есть приложение AngularJS, которое имеет два основных раздела, и я создал маршруты для каждого раздела.

Все было нормально, пока я не добавил вторую секцию и дополнительные маршруты в раздел конфигурации приложения. Я получаю сообщение об ошибке:

Ошибка: точка отсчета для заданной траектории «.blog»

Вот Угловая приложение конфигурации.

.config(function ($stateProvider, $urlRouterProvider, embedlyServiceProvider, $httpProvider, $locationProvider) { 

     $stateProvider 

// SECTION 1 
.state('blog', { 
    abstract:true, 
    url: '/blog', 
    templateUrl: '../../../../views/projects/templates/blog.html', 
    controller: 'projectController' 
}) 


// nested states 
// each of these sections will have their own view 
// url will be nested (/blog/updates) 
.state('blog.updates', { 
    url: '/updates', 
    templateUrl: '../../../../views/projects/templates/updates.html', 
}) 

.state('blog.comments', { 
    url: '/comments', 
    templateUrl: '../../../../views/projects/templates/comments.html', 
}) 



    // SECTION 2 
    .state('build', { 
     url: '/build', 
     templateUrl: '../../views/forms/build.html', 
     controller: 'BuilderController' 
    }) 

    // nested states 
    .state('build.basics', { 
     url: '/basics', 
     templateUrl: '../../views/forms/basics.html' 
    }) 

    // url will be /build/products 
    .state('build.products', { 
     url: '/products', 
     templateUrl: '../../views/forms/products.html' 
    }) 
    .state('build.blog', { 
     url: '/blog', 
     templateUrl: '../../views/forms/blog.html' 
    }) 
    .state('build.profile', { 
     url: '/profile', 
     templateUrl: '../../views/forms/profile.html' 
    }) 

    .state('build.payment', { 
     url: '/payment', 
     templateUrl: '../../views/forms/payment.html' 
    }) 
    .state('build.team', { 
     url: '/team', 
     templateUrl: '../../views/projectbuilder/forms/team.html' 
    }); 

// catch all route 
$urlRouterProvider.otherwise('/'); 

Вот UI-srefs для первой секции:

 <div class="row"> 
     <ul class="inline-list"> 
      <li><a ui-sref-active="active" ui-sref=".blog">Blog</a></li> 
      <li><a ui-sref-active="active" ui-sref=".updates">Updates ({{formData.updatesCount}})</a></li> 
      <li><a ui-sref-active="active" ui-sref=".comments">Comments ({{formData.commentsCount}})</a></li> 
     </ul> 
    </div> 

Вот UI-srefs для второй секции. Этот раздел все еще работает нормально.

<ul class="side-nav"> 
     <li><a ui-sref-active="active" ui-sref=".basics"><span>1</span> Basics</a></li> 
     <li><a ui-sref-active="active" ui-sref=".blog"><span>3</span> Blog</a></li> 
     <li><a ui-sref-active="active" ui-sref=".profile"><span>4</span> Profile</a></li> 
     <li><a ui-sref-active="active" ui-sref=".payment"><span>5</span> Payments</a></li> 
     <li><a ui-sref-active="active" ui-sref=".team"><span>6</span> Team</a></li> 
    </ul> 

Спасибо за любое понимание этого. Я довольно новичок в Angular и все еще обнимаю его.

Answer 1

В соответствии с угловым-ш documentation:

ui-sref = 'stateName' can be any valid absolute or relative state

Удалить точки и использовать уникальные названия штатов в соответствии с конфигурацией в состоянии маршрутизатора.

Не забывайте, что состояние блогов является абстрактным.

An abstract state can have child states but can not get activated itself. An 'abstract' state is simply a state that can't be transitioned to. It is activated implicitly when one of its descendants are activated.

документация радиально-интерфейс на nested states (включая абстрактные использований)

<div class="row"> 
     <ul class="inline-list"> 
      <li><a ui-sref-active="active" ui-sref="blog.updates">Updates ({{formData.updatesCount}})</a></li> 
      <li><a ui-sref-active="active" ui-sref="blog.comments">Comments ({{formData.commentsCount}})</a></li> 
     </ul> 
    </div>