ъглов потребителски маршрут вложен

Здравейте, опитвам се да създам вложен маршрут във вече вложен маршрут. Накратко, имам портал, който съдържа моята странична лента и някои други фантастични неща и там мога да навигирам до клъстери. От клъстери трябва да мога да избера един клъстер и да видя подробностите за него.

Моят „баба и дядо“ маршрут се нарича „портал“, а родителят „клъстери“. Ето кода за clusters-route

(function () {
  'use strict';

  angular.module('ap.clusters.RouteConfig', ['blocks.router','ncy-angular-breadcrumb', 'ap.clusters.ClusterDetailsCtrl'])
    .run(onRun);

  /* @ngInject */
  function onRun(routerHelper) {
    routerHelper.configureStates(getStates());
  }

  function getStates() {
    return [
          {
          state: 'portal.clusters',
          config: {
            url: '/clusters',
            templateUrl: '/views/clusters/clusters.html',
            controller: 'clustersCtrl',
            controllerAs: 'vm',
            title: 'Clusters',
            ncyBreadcrumb: {
              label: 'Clusters'
            },
           settings: {
              nav: 4,
              content: '<i class="fa fa-cubes nav-icon"></i>a<span>Clusters</span>'
      }
    }
  }
];
}

})();

Ето вложения маршрут, който се опитвам да включа:

(function () {
   'use strict';

   angular.module('ap.clusters.clusterDetailsRouteConfig', ['blocks.router', 'ncy-angular-breadcrumb', 'ap.clusters.ClusterDetailsCtrl'])
     .run(onRun);

  /* @ngInject */
  function onRun(routerHelper) {
    routerHelper.configureStates(getStates());
  }

  function getStates() {
    return [
           {
           state: 'portal.clusters.cluster-details',
           config: {
              url: '/cluster/:id',
              templateUrl: '/views/clusters-details/clusters-details.html',
              controller: 'clusterDetailsCtrl',
              controllerAs: 'vm',
              title: 'Cluster',
              ncyBreadcrumb: {
                 label: '{{vm.cluster.name}}'
              }
            }
         }
     ];
   }

 })();

Маршрутизирането изглежда работи добре, тъй като URL адресът показва ....portal/clusters/cluster/0 или какъвто и да е индекс, който избера, но html не се изобразява. Когато щракна върху връзката, само URL адресът се променя. Ето как наричам изгледа на маршрутизирането от клъстери (с помощта на нефрит)

a(ui-sref="portal.clusters.cluster-details({id: $index})")

Наистина не знам какво не е наред с него, защо не се показва html


person anram88    schedule 13.02.2015    source източник


Отговори (2)


Наскоро наследих този проект, за който anram публикува въпроса. Проблемът, който той описва, всъщност възникна поради естеството на сайта. Сайтът всъщност има някои доста сложни нужди от маршрутизиране и навигация (сложни от гледна точка на разработката, доста прости и напрегнати от гледна точка на използваемостта). За повече подробности относно това и проблем с генерирането на навигационен път, който имам със същия проект, моля, прочетете моят въпрос тук.

В конкретния случай, за който anram питаше, имаме портално оформление с банерна лента, меню на страничната лента, изгледи на таблици и подробни изгледи. Всеки един от изгледите на списъци може да бъде навигиран директно от менюто на страничната лента. Подробните изгледи могат да бъдат навигирани по два начина, или от изгледите на списъци, достъпни чрез менюто на страничната лента, или чрез дъщерни изгледи на списъци от някакъв виртуален "родителски" подробен изглед. Има редица различни нива в тази виртуална йерархия, така че навигационните пътеки за стигане до най-ниското листово ниво могат да бъдат доста кратки или доста дълги, в зависимост от това как точно навигирате.

Проблемът, с който се сблъска anram, се дължи на факта, че всички детайлни изгледи първоначално са конфигурирани да бъдат дъщерни състояния на състоянията на списъка в ui-router, когато в действителност не са. Те бяха братя и сестри в буквалния смисъл на думата. Подробният изглед не беше дъщерен изглед, вграден в ‹div ui-view /› някъде в изгледите на списъка... те бяха напълно отделни изгледи. Така името portal.clusters.cluster-detail беше неправилно. Това предполагаше, че състоянието на клъстерите трябва да бъде заредено първо и този детайл на клъстера ще бъде зареден в потребителски интерфейс някъде в този изглед. Нямаше потребителски изглед никъде в изгледа на клъстерите, така че подробностите за клъстера не се заредиха. Навигацията чрез ui-router работеше и работеше както е описано... проблемът не беше ui-router, проблемът беше простият факт, че нямаше второ ниво на вложено състояние.

Наскоро рефакторирах състоянията на ui-router, правейки всички подробни изгледи директни дъщерни на основния изглед на портала, така че сега имаме portal.clusterDetails вместо portal.clusters.cluster-detail. Това реши един проблем, подробните изгледи вече се зареждат правилно и можем да насочваме към тях от всеки друг изглед (тъй като почти всеки изглед вече е брат или сестра и всички са деца на портала.) Това обаче породи друг проблем , относно генерирането на навигационни пътища (вижте свързания ми въпрос по-горе, ако имате повече интерес да прочетете за това.)

person jrista    schedule 03.04.2015

Създадох работещ плункер тук.

Бих казал, че настройката ви изглежда добре. Единственото (скрито тук) място, което може да е грешно, е съдържанието на

 templateUrl: '/views/clusters/clusters.html',

Вътре в state: 'portal.clusters'. Какво може да не е наред там?

Това всъщност е родителски изглед за state: 'portal.clusters.cluster-details'. И това означава, че трябва да вмъкнем котва (ui-view) там:

...
<div ui-view=""></div>

Това позволява нашето дете да бъде изобразено

Проверете го в действие тук

person Radim Köhler    schedule 14.02.2015
comment
Здравей Радим. По ирония на съдбата всъщност съм наследил проекта, за който anram88 първоначално зададе въпрос. Разпознавам и самия код, който той сподели. Проблемът е, че повечето изгледи в този проект не са вложени, те са братя и сестри... но те могат да бъдат насочени към тях чрез множество средства. Аз също имам проблеми, не с маршрутизирането, а с ncyBreadcrumb. Всички наши състояния могат да бъдат пренасочени през поне два пътя, което прави навигацията трудна. Вижте въпроса ми тук: stackoverflow.com/questions/29427627/ - person jrista; 03.04.2015