Question

我正在尝试设置我的应用。它工作正常，但后来我不得不更改ui-router上的一些URL，以便有一些子视图。

不幸的是，现在，我无法正确看到我的所有页面而且我不明白为什么。

以下是一个例子：http://codepen.io/anon/pen/LNQavV?editors=1010

基本上，我有不同的模板，当网址发生变化时，我会在appContent视图中显示不同的模板。在我的详细信息中，我需要一个名为zone的子视图，我可以在其中显示detailsOverview模板或detailsEdit模板。

根据我目前的设置，我无法更改页面。好吧，页面会根据网址进行更改，但始终会显示detailsOverview！

我认为问题在某种程度上与子视图有关，而不是与URL有关，但不是100％肯定。

我也在这里粘贴$ stateProvider代码：

angular.module('ionicApp', ['ionic']).config([
  '$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    $stateProvider.state('app', {
      name: 'app',
      url: '/app',
      abstract: true,
      templateUrl: 'templates/menuTemplate.html'
    }).state('app.details', {
      name: 'appDetails',
      url: '/:zoneID',
      views: {
        'appContent': {
          templateUrl: 'templates/mainDetails.html'
        }
      }
    }).state('app.details.overview', {
      name: 'appDetailsOverview',
      url: '/details',
      views: {
        'appContent': {
          templateUrl: 'templates/mainDetails.html'
        },
        'zone': {
          templateUrl: 'templates/detailsOverview.html'
        }
      }
    }).state('app.details.edit', {
      name: 'appDetailsEdit',
      url: '/edit/day/:timerEditDay',
      views: {
        'appContent': {
          templateUrl: 'templates/mainDetails.html'
        },
        'zone': {
          templateUrl: 'templates/detailsEdit.html'
        }
      }
    }).state('app.setup', {
      name: 'setup',
      url: '/setup',
      views: {
        'appContent': {
          templateUrl: 'templates/setup.html'
        }
      }
    }).state('app.about', {
      name: 'about',
      url: '/about',
      views: {
        'appContent': {
          templateUrl: 'templates/about.html',
          controller: 'aboutPageInfo'
        }
      }
    });
    $urlRouterProvider.otherwise('app/');
  }
]);

Answer 1

问题在于，url: '/:zoneID',状态中的app.details会“吞下”所有可能的参数。

这意味着网址#/app/about和#app/setup网址也会由app.details状态处理，但似乎无效。

为了让它们正常工作，您必须在app.about州之前定义app.setup和app.details州：

$stateProvider.state('app', {
  name: 'app',
  url: '/app',
  abstract: true,
  templateUrl: 'templates/menuTemplate.html'
}).state('app.setup', {
  name: 'setup',
  url: '/setup',
  views: {
    'appContent': {
      templateUrl: 'templates/setup.html'
    }
  }
}).state('app.about', {
  name: 'about',
  url: '/about',
  views: {
    'appContent': {
      templateUrl: 'templates/about.html',
      controller: 'aboutPageInfo'
    }
  }
}).state('app.details', {
  name: 'appDetails',
  url: '/:zoneID',
  views: {
    'appContent': {
      templateUrl: 'templates/mainDetails.html'
    }
  }
}).state('app.details.overview', {
  name: 'appDetailsOverview',
  url: '/details',
  views: {
    'appContent': {
      templateUrl: 'templates/mainDetails.html'
    },
    'zone': {
      templateUrl: 'templates/detailsOverview.html'
    }
  }
})

使用工作详细信息和设置页面查看更新的codepen： http://codepen.io/anon/pen/BKPyMd?editors=1010

angularjs - ui-router无法正常显示（$ stateProvider）

1 个答案: