角+ UI路由器：$ stateChangeSuccess触发状态B而不是在A·B [英] angular + ui-router: $stateChangeSuccess triggered on state b but not on a.b

问题描述

UI路由器0.2.11 / AngularJS 1.3.0

我很难理解为什么在BarCtrl我的$ stateChangeSuccess事件处理函数不是在＃/富/酒吧触发。这是触发＃/条。

 ＃/富/酒吧 - ＆GT;控制台：富
＃/酒吧 - ＆GT;控制台：酒吧
 

我试图做到的，是上＃/富/条第一FooCtrl的处理程序被触发，然后BarCtrl的：

 富
酒吧
 

我的code：

  VAR应用= angular.module（'foobar的'，['restangular'，'ui.bootstrap'，'ui.router']）
的app.config（函数（$ stateProvider，$ urlRouterProvider）{  $ stateProvider.state（'根'，{
    网址：/，
    模板：'＆LT;格UI的视图＆gt;＆LT; / DIV＆GT;'
  }）
  .STATE（'富'，{
    摘要：真实，
    网址：/ foo的，
    控制器：'FooCtrl'，
  }）
  .STATE（'foo.bar'，{
    网址：/酒吧
    控制器：'BarCtrl'，
  }）
  .STATE（'酒吧'，{
    网址：/酒吧
    控制器：'BarCtrl'，
  }）;
}）app.controller（'FooCtrl'，函数（$范围）{
  $范围。在$（'$ stateChangeSuccess'，函数（事件，toState，toParams，fromState，fromParams）{
    的console.log（富）;
  }）;
}）;app.controller（'BarCtrl'，函数（$范围）{
  $范围。在$（'$ stateChangeSuccess'，函数（事件，toState，toParams，fromState，fromParams）{
    的console.log（'巴'）
  }）;
}）;
 

解决方案

虽然preparing我遇到我的错误来了小提琴。我想抽象次将不需要的模板，因为它们不能被访问，并假设foo的父状态的模板将接管，它不是这种情况。

要达到什么样的，我想我只需要添加：

 模板：'＆LT; UI画面/＆GT;，
 

像这样：

  .STATE（'富'，{
  摘要：真实，
  网址：/ foo的，
  控制器：'FooCtrl'，
  模板：'＆LT; UI画面/＆GT;，
}）
 

一个相关的讨论： https://github.com/angular-ui/ UI的路由器/问题/ 325

ui-router 0.2.11 / AngularJS 1.3.0

I struggle to understand why my $stateChangeSuccess event handler in BarCtrl is not triggered on #/foo/bar. It is triggered on #/bar.

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

What I'm trying to achieve is that on #/foo/bar first FooCtrl's handler is triggered and then BarCtrl's:

foo
bar

My code:

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

解决方案

While preparing a fiddle I came across my mistakes. I was thinking abstract views would not need a template since they cannot be accessed and assuming the template of foo's parent state would take over, which is not the case.

To achieve what I wanted I only had to add:

  template: '<ui-view />',

Like so:

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

A related discussion: https://github.com/angular-ui/ui-router/issues/325

这篇关于角+ UI路由器：$ stateChangeSuccess触发状态B而不是在A·B的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！