[AngularJS][UI Router]在视图中显示视图

[AngularJS][UI-Router] Display view in view

本文关键字：视图 显示 Router AngularJS UI      更新时间：2024-07-04

我不知道如何描述我的问题，但可能有代码帮助：）

我想要的：在views/accounts/index.html 中显示create_modal.html

app.js:

angular.module('myApp', [
 'ui.router'
]).config(function($stateProvider) {
      $stateProvider
          .state('index', {
            url: '/',
            template: 'Index template'
          })
          .state('about', {
              url: '/about',
              template: 'About template'
          })
          .state('panel', {
              url: '/panel',
              templateUrl: 'views/panel/index.html'
          })
          .state('accounts', {
              url: '/panel/accounts',
              templateUrl: 'views/accounts/index.html'
            })
          .state('accounts.create', {
                views: {
                    create_modal: {
                        templateUrl: 'views/accounts/partials/create_modal.html'
                    }
                }
          })
});

main index.html

<div class="container" ui-view></div>

views/accounts/index.html

[...]
<div ui-view="create_modal"></div>
[...]

当我进入/accounts/i时，会看到accounts/index.html，但create_modal.html没有加载到视图中。有什么想法吗？

给UI视图一个名称只是设置视图的名称，而不是将状态设置为要使用的状态。您应该将UI视图命名为您希望调用的名称。

如果你想测试它，你可以尝试将UIsref应用于锚标记，但你想做的是将$state变量更改为你想要的状态。

$state.go('accounts.create');

您可以尝试做的另一件事是为该状态设置一个URL并导航到该URL。

.state('accounts', {
    url: '/panel/accounts',
    templateUrl: 'views/accounts/index.html'
})
.state('accounts.create', {
    url: '/create',
    templateUrl: 'views/accounts/partials/create_modal.html'
});

希望能有所帮助，我会提供UI视图的文档供您参考。

点击这里！

我没有访问开发环境的权限，但您是否尝试为"accounts.create"状态设置一个空url？

这就是他们在这里的做法：

https://angular-ui.github.io/ui-router/sample/#/contacts

以下是源代码（查找"contacts.list"状态）：

https://angular-ui.github.io/ui-router/sample/app/contacts/contacts.js

希望能有所帮助。

相关文章：