AngularJS ui.router 父 Controller 触发器

Question

我有一个复杂的 ui.state 设置，为了方便 url，我将用户带到“基本”子页面 url，然后提供选项卡来过滤页面上的内容。例如:

/page/unique-page-slug <- 'base' 子页面 url

/page/unique-page-slug/popular <- 过滤后的内容子页面 url

我遇到的问题是，尽管每个状态都有一个 Controller ，但我似乎无法在状态第一次发生变化时触发。

var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider){

  // For any unmatched url, send to /route1
  $urlRouterProvider.otherwise("/route1")

  $stateProvider
    .state('route1', {
        url: "/route1",
        templateUrl: "route1.html",
        controller: function($scope){
          console.log('parent triggered');
        }
    })
      .state('route1.list', {
          url: "/list",
          templateUrl: "route1.list.html",
          controller: function($scope){
            $scope.items = ["A", "List", "Of", "Items"];
            console.log('child triggered');
          }
      })
})

这是一个plunkr例子。请注意，当我转到路线 1 时，它会记录“父级触发”，然后转到子状态我得到“子级触发”，当我回到父级时我没有触发任何东西，但在重新进入子状态时它重新触发“子状态”

我想做的是当我回到父状态时让它触发“父触发”。

Answer 1

一个选择是您可以创建一个 shell Controller ，并使用 .transitionTo 并设置 { reload: true }?

标记

  <div class="navbar" ng-controller="shell">
    <div class="navbar-inner">
      <a class="brand" href="#">Quick Start</a>
      <ul class="nav">
        <li><a href="#" ng-click="go('route1')">Route 1</a></li>
      </ul>
    </div>
  </div>

Controller

.controller('shell', ['$state','$scope',function($state, $scope) {
      $scope.go = function(route) {
        $state.transitionTo(route, { param1 : 'something' }, { reload: true });
      }
 }]);

更新示例: http://plnkr.co/edit/J8Y02IBeExNMVUi9y7Cx?p=preview

老实说，在阅读这个问题之前，我并不知道 .transitionTo。但是我在github angular论坛上找到了here

我认为最初的问题是，当您转到子路线时，您永远不会真正离开路线 1。因此 Controller 代码不会被重新绑定(bind)，除非你明确地重新运行它。在这种情况下，强制重新加载。