[AngularJS] [UI-Router]在視圖中顯示視圖

Question

我不知道如何描述我的問題，但也許代碼幫助:)

我想要的：在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'
                    }
                }
          })
});

主要index.html

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

意見/帳號/ 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的文檔供您參考。

點擊這里！