Question

我正在使用angularjs ui-router作为cordova app。我正在尝试将ui-view模板（左侧面板）重用于多个状态。这个ui-view适用于除一个州之外的几乎所有州。我试图引用很多教程，但仍然无法实现我想要的。这是我在 app.js 中的代码：

var angularApp = angular.module('angularApp', [
  'ui.router',
]);

angularApp.config(function ($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/');
  $stateProvider
    .state('root', {
      abstract: true,
      views: {
        'left-panel': {
          templateUrl: 'templates/common-left-panel.html',
        },
      }
    })
    .state('root.home', {
      url: '/',
      views: {
        'container@': {
          templateUrl: 'templates/home.html',
        }
      }
    })
    .state('root.settings', {
      url: 'settings',
      views: {
        'container@': {
          templateUrl: 'templates/settings.html',
        }
      }
    })
    .state('root.category', {
      url: 'category/:catId',
      views: {
        'container@': {
          templateUrl: 'templates/category-nodes.html',
          controller: 'ListCatNodesCtrl'
        }
      }
    })
});

这是在 index.html

中

<div ui-view="left-panel"></div>
<a ui-sref="root.settings">Settings</a>
<div ui-view="container"></div>

使用此代码，可以正确呈现主页。但是当我点击设置链接时，屏幕或网址没有任何变化。在渲染的DOM中，我得到<a ui-sref="root.settings" href="#settings">Settings</a>。同样适用于类别页面。基本上我正在使用cordova和angularjs开发一个Android应用程序。提前感谢。

对多个状态使用相同的ui-view模板

0 个答案: