Question

我尝试设置一个没有父模板但使用angular ui-router包含多个命名视图的页面。

有一个简单的html设置：

<body>
  <div ng-app="thing">
    <h1>Multiple Views</h1>
    <div ui-view="oneThing"></div>
    <div ui-view="twoThing"></div>
    <div ui-view="threeThing"></div>

    <script id="one_thing.html" type="text/ng-template">
      <p>one: {{text}}</p>
    </script>
    <script id="two_thing.html" type="text/ng-template">
      <p>two: {{text}}</p>
    </script>    
    <script id="three_thing.html" type="text/ng-template">
      <p>three: {{text}}</p>
    </script>
  </div>
  </body>

我希望这意味着我有三个视图和三个模板，这些＆＃39;＆＃39;应用程序可以看到

然后JS设置是：

'use strict';

var thing = angular.module("thing", ['ui.router']);

thing.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('things', {
        url: '/things', 
        views: {
          'oneThing': {
            templateUrl:'one_thing.html',
            controller: 'oneCtrl'
          },
          'twoThing': {
            templateUrl:'two_thing.html',
            controller: 'twoCtrl'
          },
          'threeThing': {
            templateUrl:'three_thing.html',
            controller: 'threeCtrl'
          }
      }
  });
  $urlRouterProvider.when('/', 'things');
});

thing.controller('oneCtrl', function($scope) {
  $scope.text = 'boom';
});

thing.controller('twoCtrl', function($scope) {
  $scope.text = 'bang';
});

thing.controller('threeCtrl', function($scope) {
  $scope.text = 'wallop';
});

我认为这意味着总是负载事物＆＃39;作为路径并在该状态内加载三个视图，每个视图指向不同的模板和控制器。但相反，我得到一个空白页......

我是否误解了它是如何工作的或如何写它（或者更糟糕的是，两者都是!!）？

Answer 1

默认网址为而不是/

因此$urlRouterProvider.when('/', 'things');未被触发。

更改为

$urlRouterProvider.when('', 'things');

你的傻瓜工作。

如何更正ui-router多个命名视图的使用

1 个答案: