$stateChangeSuccess 未在 href-transitioning 上触发答案

【问题标题】：$stateChangeSuccess not firing on href-transitioning$stateChangeSuccess 未在 href-transitioning 上触发
【发布时间】：2013-08-02 08:02:59
【问题描述】：

我的结论是否正确，除非我使用 $state.transitionTo，否则 $stateChangeSuccess 不会触发？例如：

//in app config
.state('detail.zoom', {
        url: '/zoom/{itemId}',
        templateUrl: 'detail/zoom-partial.html'
    })

//in html
<a href="#/zoom/{{item.id}}" >ZOOM IT!</a>

//in directive
scope.$state.transitionTo('detail.zoom', { itemId: item.id});

//in some controller
$scope.$on('$stateChangeSuccess', function () {alert('done transitioning!')});

transitionTo 中的事件触发 $stateChangeSuccess，但 href 版本并非如此。有没有办法为两种类型的转换平等地触发事件？

【问题讨论】：

可能你正在寻找 $routeChangeSuccess
@Codezilla，我可以对此进行测试，但我对此表示怀疑，因为这是对 angular-ui/ui-router 的引用，它是 angularjs 的单独库，而不是默认的 routeProvider。见这里link
哦，我现在知道我的错误是什么了。我有一个嵌套状态，但没有在 href 中使用完整的 url 路径。

标签： angularjs angular-ui-router angularjs-routing

【解决方案1】：

在我看来，您使用的是嵌套状态。不应该是称为“详细信息”的状态的单独网址。意思是完整的 url 是 url: '/detail/{itemId}/zoom',

【讨论】：

是的，这正是我所缺少的！非常感谢 :) 仅使用部分 url 声明状态时有点混乱，但在 html 中你当然必须使用完整路径

【解决方案2】：

试试：

$rootScope.$on('$stateChangeSuccess', function () {
    alert('done transitioning!')
});

【讨论】：

虽然这可能是一个正确的答案，但如果您添加了关于您的代码为何工作/它的作用的解释，那将是一个很大的改进。

【解决方案3】：

从 1.0.0 版本的 ui-router 开始，需要注入

$transition

服务

并在控制器中使用此方法：

$transitions.onStart({}, function() {});
$transitions.onSuccess({}, function() {});

【讨论】：

【解决方案4】：

你可以在你的指令中尝试 scope.$apply()

//in directive
scope.$state.transitionTo('detail.zoom', { itemId: item.id});
scope.$apply();

【讨论】：

scope.$state.transitionTo 没问题，所以不需要 $apply()。它是不触发事件的href。谢谢，不过

【解决方案5】：

您可以在之前使用插入符号 ^ 来缩短嵌套 URL：

.state('detail.zoom', {
    url: '^/zoom/{itemId}',
    templateUrl: 'detail/zoom-partial.html'
})

<a href="#/zoom/{{item.id}}" >ZOOM IT!</a>

【讨论】：