Angularjs 角度+；ui路由器：$stateChangeSuccess在状态b上触发，但在a.b上未触发

ui路由器0.2.11/AngularJS 1.3.0

我很难理解为什么在#/foo/bar上没有触发BarCtrl中的$StateChangeSucture事件处理程序。它在#/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')
  });
});

var-app=angular.module（'foobar'，['restanglar'，'ui.bootstrap'，'ui.router']））
app.config（函数（$stateProvider，$urlRouterProvider）{
$stateProvider.state（'root'{
网址：“/”，
模板：“”
})
.state（'foo'{
摘要：没错，
网址：“/foo”，
控制器：“FooCtrl”，
})
.state（'foo.bar'{
url:“/bar”，
控制器：“BarCtrl”，
})
.州（'bar'{
url:“/bar”，
控制器：“BarCtrl”，
});
})
应用程序控制器（'FooCtrl'，函数（$scope）{
$scope.$on（“$stateChangeSuccess”，函数（事件、toState、toParams、fromState、fromParams）{
控制台日志（“foo”）；
});
});
应用程序控制器（'BarCtrl'，函数（$scope）{
$scope.$on（“$stateChangeSuccess”，函数（事件、toState、toParams、fromState、fromParams）{
console.log（'bar'））
});
});

您没有指定#/foo/bar的url

您正在指定foo.bar的状态，但只能从#/bar的url访问该状态

更改以下内容

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

。。。到

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

---

。。。你应该很好。

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

为了实现我想要的，我只需补充：

  template: '<ui-view />',

模板：“”，

像这样：

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

.state（'foo'{
摘要：没错，
网址：“/foo”，
控制器：“FooCtrl”，
模板：“”，
})

---

相关讨论：

确保在

#/foo/bar

@Alexei:您能解释一下吗？我在想foo.bar链中的所有控制器都会被调用，文档说：“当一个状态是“活动的”时，它的所有祖先状态都是隐式活动的。”你能准备一把小提琴吗？我只是在本地检查了一下，一切正常。不，使用点符号，家长的url将自动附加到孩子的url上，请参阅

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