Как определить простые вложенные представления в Angular + ui-router

Question

Как определить простые вложенные представления в Angular + ui-router

0

У меня есть приложение Angular с вложенными представлениями:

...<body ng-app="blocksApp">

<div ui-view="full">

    <div ui-view="viewMainMenu"></div>
    <div ui-view="viewHeaderBar"></div>
    <div ui-view="viewMainContent"></div>

</div>

</body>...

Независимо от того, что я делаю с моими маршрутами ui-router, я просто получаю "Невозможно прочитать имя свойства" неопределенного "три раза, один раз для каждого моего" subviews ". Если я удалю ссылку "родительский" ui-view, тогда все начнет работать, но изменение "полного" на "" не влияет. Я думал, что у вас могут быть вложенные u-взгляды?

Моя маршрутизация выглядит так:

angular.module('blocksApp')
.config(function ($stateProvider, $urlRouterProvider) {

     //For any unmatched url, redirect to this state:
    $urlRouterProvider.otherwise("/default",{
        views:{
            "viewMainMenu":{template:"Purple Main Menu"},
            "viewHeaderBar":{template:"Purple Header Bar"},
            "viewMainContent":{template:"Purple main content"}
        }

    });
    //
    // Now set up the states...

Ошибка консоли выглядит следующим образом:

angular.js:13550 TypeError: Cannot read property 'name' of undefined
    at getUiViewName (http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:4117:86)
    at updateView (http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:4002:33)
    at http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:3975:9
    at invokeLinkFn (http://localhost:3000/bower_components/angular/angular.js:9694:9)
    at nodeLinkFn (http://localhost:3000/bower_components/angular/angular.js:9093:11)
    at compositeLinkFn (http://localhost:3000/bower_components/angular/angular.js:8397:13)
    at nodeLinkFn (http://localhost:3000/bower_components/angular/angular.js:9088:24)
    at compositeLinkFn (http://localhost:3000/bower_components/angular/angular.js:8397:13)
    at publicLinkFn (http://localhost:3000/bower_components/angular/angular.js:8277:30)
    at lazyCompilation (http://localhost:3000/bower_components/angular/angular.js:8615:25) <!-- uiView: viewMainMenu -->

Могу ли я иметь простые ui-представления, вложенные таким образом? Если да, то как должна выглядеть моя маршрутизация?

whatdoesitallmean 18 май 2016, в 15:12

Источник

Теги:

angularjs

angular-ui-router

2 ответа

0

я думаю, потому что вы не дали имя своему государству

сначала попробуйте определить состояние:

    $stateProvider.state('default', {
        url: '/default',
        views: {
            'view1':{
                template: '<template1>',
            },
            'view2':{
                template: '<template>',
            },
            'view3':{
                template: '<template3>',
            }
        }
    });

Затем установите иначе $ urlRouterProvider.otherwise("/default");

MayK 18 май 2016, в 11:29

Ещё вопросы

cst1992 · Accepted Answer · 2016-05-18T10-55-00.000Z

Вложенный ui-view не работает так, как вы думаете.

В otherwise будет только URL-адрес, например

.otherwise("/")

перенаправляется на главную страницу.

Вложенное представление находится в шаблоне родителя, например:

parent.html

<h3>I'm parent</h3>
<p>I'm a paragraph.</p>
<div ui-view="childView1"></div> <!-- in your case - viewMainMenu -->
<div ui-view="childView2"></div> <!-- in your case - viewHeaderBar -->
<div ui-view="childView3"></div> <!-- in your case - viewMainContent -->

<p>I'm another paragraph.</p>

И представления определяются только в состоянии:

routing.js

$stateProvider
     .state('parent', {
         views: {
             'childView1': {template: '<p>A template</p>' }
             'childView2': {template: '<p>A template</p>' }
             'childView3': {template: '<p>A template</p>' }
         }
     }