Angularjs $stateProvider不在子路由下工作

我想查看

银行.贷款计划.编辑
银行.贷款计划
状态中的
状态

但是，当我单击蓝色按钮时。url已从更改为


到


但是，它仍然保持相同的状态和控制器

未触发
loanPlanEditCtrl


按钮链接按钮的HTML

编辑

$stateProvider
.state（'banks'{
url:“/banks”，
模板：“”，
解析：加载（['js/services/bank.js'，'js/controllers/banks.js']）
})
.州（“银行贷款计划”{
url:“/：银行id/贷款计划”，
控制器：“loanPlanBaseCtrl”，
templateUrl:'admin\u tpl/loan\u plan/index.html'，
解析：加载（['js/controllers/loan_plan.js']）
})
.州（“银行.贷款计划.编辑”{
url:“/edit/：bank\u id/：loan\u plan\u id”，
控制器：“LoanPaneditCtrl”，
templateUrl:'admin\u tpl/loan\u plan/form.html'，
})

父状态的HTML

名称
描述
洛维拉特
高反差
活动
{{plan.name | |'empty'}
{{plan.description | |'empty'}}
{{plan.lowerbound|u rate | |'empty'}}
{{plan.upperbound| | |'empty'}}
编辑

子州的HTML

我是个孩子
您是否链接到html中的控制器？控制台中是否有错误？你能看到从服务器加载的form.html模板或loanPlanEditCtrl文件吗？@Chris他通过路由配置链接，无需在htmlIf中再次链接，如果你有子状态，父模板中必须有一个
ui-view
指令-也就是说，如果你不想在另一个状态的模板中呈现一个状态，它就不能是子状态（至少，默认情况下它是这样工作的，可能有一种方法可以绕过它）。@newBike-这就是我试图表达的观点（尽管我的措辞非常糟糕…）-任何有子级的状态都需要在其模板中有一个
ui视图
。在祖父母状态下使用
ui视图
将呈现父状态，但您需要在父状态下使用另一个
ui视图
指令来呈现子状态。在我看来，你最好将
银行.贷款计划.编辑
改为
银行.贷款计划.编辑
-这样，它将成为
银行
状态的子项，当你导航到它时，它将取代
银行.贷款计划
。但是URL可以保持不变。您在html中链接到控制器了吗？控制台中有错误吗？你能看到从服务器加载的form.html模板或loanPlanEditCtrl文件吗？@Chris他通过路由配置链接，无需在htmlIf中再次链接，如果你有子状态，父模板中必须有一个
ui-view
指令-也就是说，如果你不想在另一个状态的模板中呈现一个状态，它就不能是子状态（至少，默认情况下它是这样工作的，可能有一种方法可以绕过它）。@newBike-这就是我试图表达的观点（尽管我的措辞非常糟糕…）-任何有子级的状态都需要在其模板中有一个
ui视图
。在祖父母状态下使用
ui视图
将呈现父状态，但您需要在父状态下使用另一个
ui视图
指令来呈现子状态。在我看来，你最好将
银行.贷款计划.编辑
改为
银行.贷款计划.编辑
-这样，它将成为
银行
状态的子项，当你导航到它时，它将取代
银行.贷款计划
。不过，URL可以保持不变。
<a ui-sref="banks.loan_plans.edit({bank_id:bank_id, loan_plan_id: plan.id})">
    <button class="btn btn-info ">Edit</button>
</a>

  .state('banks', {
      url: '/banks',
      template: '<div ui-view class="fade-in"></div>',
      resolve: load(['js/services/bank.js', 'js/controllers/banks.js'])
  })
  .state('banks.loan_plans', {
      url: '/:bank_id/loan_plans',
      controller: 'loanPlanBaseCtrl',
      templateUrl: 'admin_tpl/loan_plan/index.html',
      resolve: load(['js/controllers/loan_plan.js'])
  })
  .state('banks.loan_plans.edit', {
      url: '/edit/:bank_id/:loan_plan_id',
      controller: 'loanPlanEditCtrl',
      templateUrl: 'admin_tpl/loan_plan/form.html',
  })

<div ui-view class="wrapper-md" ng-controller="loanPlanIndexCtrl">
    <div class="panel panel-default">
        <div class="panel-body">
            <table class="table table-bordered table-hover table-condensed">
                <tr style="font-weight: bold">
                    <td>Name</td>
                    <td>Description</td>
                    <td>LowerRate</td>
                    <td>HigherRate</td>
                    <td>Operation</td>
                </tr>
                <tr ng-repeat=" plan in loan_plans ">
                    <td>
                        {{ plan.name || 'empty' }}
                    </td>
                    <td>
                        {{ plan.description || 'empty' }}
                    </td>
                    <td>
                        {{ plan.lowerbound_rate || 'empty' }}
                    </td>
                    <td>
                        {{ plan.upperbound_rate || 'empty' }}
                    </td>
                    <td>
                        <a ui-sref="admin.banks.loan_plans.edit({bank_id:bank_id, loan_plan_id: plan.id})">
                            <button class="btn btn-info ">Edit</button>
                        </a>
                    </td>
                </tr>
            </table>
        </div>
    </div>

<div class="wrapper-md" ng-controller="loanPlanEditCtrl">        
  I'm child
</div>