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

Question

我不知道如何描述我的问题，但也许代码有帮助:)

我想要的：在views/accounts/index中显示create_modal.html。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'
                    }
                }
          })
});

主要index.html

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

views/accounts/index.html

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

当我继续 /accounts/ 时，我看到 accounts/index.html 但 create_modal.html 未加载到视图中。有任何想法吗？

Answer 1

我无权访问开发环境，但您是否尝试过为您的 '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

希望对您有所帮助。

Answer 2

给UI-View起个名字只是设置视图的名字，并不是把状态设置成你想使用的状态。您应该将 UI-View 命名为任何您想要的名称。

如果您想对其进行测试，您可以尝试将 UI-sref 应用于锚标记，但您要做的是将 $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-View 的文档供您参考。

Click here!

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

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

javascript

angularjs

angular-ui-router