Question

我是角度js和ui路由器的新手。我打算设计一个有角度的js ui路由应用程序。我有两个州，州A和州B.州B有子州。在应用程序的登录页面（这是一个查询面板）上，状态A被正确调用。与登录页面的交互应该显示结果，该结果被路由为状态B的子状态。

app.js

$stateProvider
  .state('A', {
    url: '/queryPanel',
    templateUrl: 'queryParameterView.html'
  })
  .state('B', {
    url: '/resultPanel',
  })
  .state('B.child', {
    url: '/overView',
    templateUrl: 'xyz.html',
    controller: function($scope) {
      $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
    }
  });

基本上我想从州A过渡到州B的子州（即B.child）

<a ui-sref="B.child" class="btn btn-primary">show xyz</a>

这就是我试图调用子状态的方法。

然而它不起作用。当我点击按钮show xyz时，网址会发生变化 localhost:1234/queryPanel到localhost:1234/resultPanel/overView，但控制器和模板不会被调用/加载。

我该如何解决这个问题？我正在关注此link

由于

Answer 1

每当你有一个子状态时，你必须确保在父状态的视图中，它有一个ui-view指令，以便子状态可以驻留在它上面。

我可以通过$state配置看到的一个直接问题是，在B州，您没有template或templateUrl属性。你应该做的是这样的事情：

$stateProvider
  .state('A', {
    url: '/queryPanel',
    templateUrl: 'queryParameterView.html'
  })
  .state('B', {
    url: '/resultPanel',
    template:'<div ui-view></div>' // or you can use templateUrl
  })
  .state('B.child', {
    url: '/overView',
    templateUrl: 'xyz.html',
    controller: function($scope) {
      $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
    }
  });

修改：已添加plnkr

未调用子状态的控制器和模板。从孩子父母的兄弟姐妹转变而来

1 个答案: