Question

我已经命名了观点：

.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-controller）：

<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>

我的baseCtrl无法识别任何ng-model中文本框中的ui-view值。

<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定义为每个视图的控制器。

Answer 1

这个区块可能不正确：

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

您确定未命名的项目应该是状态配置对象中的密钥吗？您可以尝试将其区分开来：

.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' }
  }
})

ui-router命名视图和ng-controller

1 个答案: