ui-маршрутизатор именованные представления и NG-контроллер

Я назвал представления:

.state('home', {
  url: '/',
  views: {
    '' : {
      templateUrl: '/layouts/main.html',
      controller: ['$rootScope', function($rootScope) {
        $rootScope.css.background = "#ebeced";
      }]
    },
    'nav@home': { templateUrl: '/templates/nav.html' },
    'menu@home': { templateUrl: '/home/menu.html'},
    'main@home': { templateUrl: '/templates/feed.html' },
    'footer@home': { templateUrl: '/home/footer.html' }
  }
})

и main.htmlвыглядит так (Обратите внимание на NG-контроллер):

<div ng-controller="baseCtrl">
  <div ui-view="nav"></div>

  <div class="wrapper">

    <div id="menu">
      <div ui-view="menu"></div>
    </div>

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

    <div id="footer">
      <div ui-view="footer"></div>  
    </div>

  </div>
</div>

My baseCtrlне распознает ng-modelзначения в текстовых полях ни в одном из ui-views.

<input type="text" ng-model="url" ng-blur="addUrl()" />

и baseCtrl:

$scope.url = ""; //required or get error about not being defined
$scope.addUrl = function() {
  console.log($scope.url); //nothing???
}

Совершаю ли я где-нибудь глупую ошибку?

Обновление:
Я думаю, что я решил проблему — мне нужно определить baseCtrlкак контроллер для каждого представления тоже.

1 ответ

  1. Этот блок может быть не исправлен:

    '' : {
     templateUrl: '/layouts/main.html',
    //..etc
    

    Вы уверены, что безымянный элемент должен быть ключом в объекте конфигурации состояния? Вы можете попробовать поставить его differenlty:

    .state('home', {
      url: '/',
      templateUrl: '/layouts/main.html',
      controller: ['$rootScope', function($rootScope) {
            $rootScope.css.background = "#ebeced";
      }],
      views: {
        'nav@home': { templateUrl: '/templates/nav.html' },
        'menu@home': { templateUrl: '/home/menu.html'},
        'main@home': { templateUrl: '/templates/feed.html' },
        'footer@home': { templateUrl: '/home/footer.html' }
      }
    })