Question

ui-router 0.2.11 / AngularJS 1.3.0

我很难理解为什么在＃/ foo / bar上没有触发BarCtrl中的$ stateChangeSuccess事件处理程序。它在＃/ bar上触发。

#/foo/bar -> Console: foo
#/bar -> Console: bar

我想要实现的是在＃/ foo / bar上首先触发FooCtrl的处理程序，然后触发BarCtrl：

foo
bar

我的代码：

var app = angular.module('foobar', ['restangular', 'ui.bootstrap', 'ui.router'])
app.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider.state('root', {
    url: "/",
    template: '<div ui-view></div>'
  })
  .state('foo', {
    abstract: true,
    url: "/foo",
    controller: 'FooCtrl',
  })
  .state('foo.bar', {
    url: "/bar",
    controller: 'BarCtrl',
  })
  .state('bar', {
    url: "/bar",
    controller: 'BarCtrl',
  });
})

app.controller('FooCtrl', function($scope) {
  $scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
    console.log("foo");
  });
});

app.controller('BarCtrl', function($scope) {
  $scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
    console.log('bar')
  });
});

Answer 1

在准备小提琴时，我遇到了我的错误。我认为抽象视图不需要模板，因为它们无法被访问，并且假设foo的父状态模板将接管，情况并非如此。

要实现我想要的东西，我只需要添加：

  template: '<ui-view />',

像这样：

.state('foo', {
  abstract: true,
  url: "/foo",
  controller: 'FooCtrl',
  template: '<ui-view />',
})

相关讨论：https://github.com/angular-ui/ui-router/issues/325

Answer 2

你没有指定＃/ foo / bar的url是全部。

您正在指定foo.bar的状态，但只能从＃/ bar的URL访问状态。

更改以下内容......

  .state('foo.bar', {
    url: "/bar",
    controller: 'BarCtrl',
  })

...到......

  .state('foo.bar', {
    url: "/foo/bar",
    controller: 'BarCtrl',
  })

......你应该很好。

angular + ui-router：$ stateChangeSuccess在状态b上触发但在a.b上没有触发

2 个答案: