Angular.js - ui-router沒有注入視圖

Question

我對於angular.js的ui-router有問題。 我目前正在開發一個帶有angular.js的項目，並使用ui-router作為路由器。 現在的問題是，我希望有一個嵌套視圖，如下所示：

views / settings / index.html （也是ui-router中以前創建的模板）

<div class="settings">
  [...]
  <div class="settings-content" ui-view="content"></div>
</div>

app.js

$stateProvider.state('settings', {
  url: '/settings',
  views: {
    main: {
      templateUrl: 'views/settings/index.html',
      controller: 'SettingsController'
    },
    "content": {
      templateUrl: 'views/settings/privacy.html',
      controller: 'SettingsController'
    }
  },
  ncyBreadcrumb: { label: 'Settings' }
})

現在我遇到的問題是，定義的content模板沒有注入到ui-view="content" div中。 主要內容（ views/settings/index.html ）正確加載。 在嵌套狀態下，還可以使用相同的"string": Object將模板添加到ui-view="content" 。

這是怎么來的？ 提前致謝！

Answer 1

您必須使用此處所述的viewName@stateName語法。

嘗試這個

$stateProvider.state('settings', {
  url: '/settings',
  views: {
    main: {
      templateUrl: 'views/settings/index.html',
      controller: 'SettingsController'
    },
    "content@settings": {
      templateUrl: 'views/settings/privacy.html',
      controller: 'SettingsController'
    }
  },
  ncyBreadcrumb: { label: 'Settings' }
})

Answer 2

我在我的演示應用程序中使用了ui-router模塊。

您需要在視圖中指定層次結構。

父視圖未指定給子視圖，因此您必須使用ViewName @ parentState

https://github.com/singhmohancs/angularDemo/tree/master/app/modules