AngularJS ui.router父控制器触发器

时间:2014-08-15 08:23:46

标签: angularjs

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

/page/unique-page-slug< --'base'ubspage url

/page/unique-page-slug/popular< - 已过滤的内容子页面网址

我遇到的问题是,尽管每个州都有一个控制器,但是当状态在第一次发生变化后似乎无法触发。

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');
          }
      })
})

Heres是plunkr的例子。请注意,当我进入路线1时,它记录'父触发',然后进入子状态我得到'儿童触发',当我回到父母我没有得到任何触发,但重新进入子状态它重新触发'儿童国家'

我想要做的是当我回到父状态时触发'父触发'。

1 个答案:

答案 0 :(得分:1)

一个选项是您可以创建一个shell控制器,并使用.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('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角度论坛上发现了它here

我认为最初的问题是,当你去一条子路线时,你永远不会真正从route1过渡。因此,除非您执行某些操作以明确重新运行它,否则控制器代码不会重新绑定。在这种情况下,强制重新加载。