1

我有一个带有嵌套 ui 视图的 Angular 应用程序。在主页上，我有一个子菜单，其中包含两个在主页上呈现的链接。我有 Menu1 显示一个列表，并希望在页面加载时将该列表显示为默认值。我也有 Menu2，一旦单击它会显示不同的列表，但不是默认视图。

我已经让嵌套视图稍微处理错误。我只能在加载时更改为一种状态，不能来回更改状态。单击其中一个嵌套视图后，我收到 404 错误，另一个返回 404 错误。

另外，如何将嵌套视图渲染为加载时的默认视图？就像我希望 menu1 在加载主页时默认呈现在 ui-view 中一样。

应用程序.js

$stateProvider
  .state('/', {
    url: '/index',
    templateUrl: '/index',
    controller: 'indexCtrl'
  })
  .state('/main', {
    url: '/main',
    templateUrl: 'main',
    controller:   'mainCtrl'
  })
  .state('/main.menu1', {
    url: '/menu1',
    templateUrl: "menu1",
    controller: 'menu1Ctrl'
  })
  .state('/main.menu2', {
    url: '/menu2',
    templateUrl: "menu2",
    controller: 'menu2Ctrl'
  });

控制器

app.controller('menu1Ctrl', ['$scope', function($scope) {
    $scope.livenow = [
    { name: 'user1',
    status: 'online'
    },
    { name: 'user2',
    status: 'online'
    },
    { name: 'user3',
    status: 'online'
    },
    { name: 'user4',
    status: 'online'
    },
    { name: 'user5',
    status: 'online'
    }
    ];
}]);
app.controller('menu2Ctrl', ['$scope', function($scope) {
$scope.livenow = [
{ name: 'user6',
    status: 'offline'
    },
    { name: 'user7',
    status: 'online'
    },
    { name: 'user8',
    status: 'offline'
    },
    { name: 'user9',
    status: 'online'
    },
    { name: 'user10',
    status: 'offline'
    }
    ];
}]);

main.html

<div class="section2 col-md-12">
    <div class="row">
        <div class="section2nav col-md-offset-4 col-md-4">
            <a ui-sref='/main.menu1'> menu1 </a> | <a ui-sref="/main.menu2"> menu2 </a>
            <ui-view></ui-view>
        </div>
    </div>
4

1 回答 1

0

您想删除每个状态的斜线。例如，

.state('/main', {应该.state('main', {

于 2015-12-17T04:11:13.697 回答