[英]Component in AngularJS 1.5 doesn't listen Broadcasted event from $scope
I'm having this issue and I can't really figure out how to solve this. 我遇到了这个问题,无法真正解决该问题。 I have this component: 我有这个组成部分:
(function () {
'use strict';
// Usage:
//
// Creates:
//
myApp
.component('navbar', {
//template:'htmlTemplate',
templateUrl: 'app/components/navbar/navbar.partial.html',
controller: ControllerController,
bindings: {
progress: '<'
},
});
ControllerController.$inject = ['$scope','$rootScope','changeState'];
function ControllerController($scope,$rootScope,changeState) {
var $ctrl = this;
$scope.$on('state-changed',function(event,args){
console.log(args);
});
$ctrl.$onInit = function () { };
$ctrl.$onChanges = function (changesObj) { };
$ctrl.$onDestory = function () { };
}
})();
The event 'state-changed' is triggered on $transitions.onSuccess (ui-router 1.0 Beta). 事件“状态更改”在$ transitions.onSuccess(UI路由器1.0 Beta)上触发。 Here the code: 这里的代码:
var myApp = angular.module('myApp', ['ui.router']);
myApp.controller('appCtrl', ['$scope', '$state', 'formDataService', '$timeout', '$transitions','changeState','$transitions',
function ($scope, $state, formDataService, $timeout, $transitions,changeState,$transitions) {
changeState.go('1');
$scope.stateByFar = 1;
$scope.currentState = function(){
return $state.current.name;
};
$scope.updateStateByFar = function(){
if (parseInt($scope.currentState())>$scope.stateByFar)
$scope.stateByFar=parseInt($scope.currentState());
};
$transitions.onSuccess({to: '*'}, function(){
$scope.updateStateByFar();
console.log($scope.stateByFar);
$scope.$broadcast('state-changed',{currentState: $scope.currentState(),
stateByFar : $scope.stateByFar});
}
);
}]);
[EDIT] The broadcast actually works. [编辑]广播实际上有效。 can't broadcast on the first state.go tho. 无法在第一个状态播放。 when the main module runs, the first instruction is : $state.go('1'); 当主模块运行时,第一条指令是:$ state.go('1'); and I can't detect this first state.go. 而且我无法检测到第一个state.go。 Further state.go are listened. 进一步收听state.go。
I'm not sure if you are experiencing an issue similar to mine, in such case I hope my findings will help you. 我不确定您是否遇到类似于我的问题,在这种情况下,希望我的发现对您有所帮助。 The full description of my problem, and the solution I found is here . 我的问题的完整描述以及找到的解决方案在这里 。
In short, I came across some issues while using $transitions
, and I found out that, with version 1.0.0.beta1 the to
and from
params were not working. 简而言之,在使用$transitions
遇到了一些问题,我发现在1.0.0.beta1版本中, to
和from
参数不起作用。
So, instead of 所以,代替
$transitions.onSuccess({to: '*', form: '*'}, function(){});
I'm using 我正在使用
$transitions.onSuccess({}, function(){
if($state.current.name == 'myState') // do stuff
});
I'll point out four things: 我将指出四件事:
1) '*'
is a glob pattern which matches any state at the root level, but it doesn't match child states. 1) '*'
是一种全局模式,它与根级别的任何状态匹配,但与子状态不匹配。 Use double star '**'
to match child states too. 也使用双星号'**'
来匹配子状态。 The ui-router glob documentation is scattered and not very good, sorry. ui-router glob文档很分散,不好,抱歉。
Better yet, the default to: criteria already matches any state, so use onSuccess({}, ...)
. 更好的是,默认值为:条件已经匹配任何状态,因此请使用onSuccess({}, ...)
。
This is documented here https://ui-router.github.io/docs/latest/interfaces/transition.hookmatchcriteria.html 这在这里记录https://ui-router.github.io/docs/latest/interfaces/transition.hookmatchcriteria.html
All properties are optional. 所有属性都是可选的。 If any property is omitted, it is replaced with the value true, and always matches. 如果省略任何属性,则将其替换为值true,并且始终匹配。
2) If you create a hook in a controller, you should deregister that hook when the controller scope is destroyed. 2)如果在控制器中创建钩子,则在销毁控制器作用域时应注销该钩子。
var deregisterFn = $transitions.onBefore(...)
$scope.$on('$destroy', deregisterFn);
3) If a transition is in progress before your controller is initialized (and before your onSuccess hook registers), the initial transition won't be captured. 3)如果在初始化控制器之前(以及在onSuccess挂钩寄存器之前)正在进行转换,则不会捕获初始转换。 You can hook into the in-progress transition promise from $state.transition
&& $state.transition.promise
您可以从$state.transition
&& $state.transition.promise
正在进行的过渡承诺。
4) The legacy $stateChange*
events are still available, but you have to opt-in. 4)旧的$stateChange*
事件仍然可用,但是您必须选择加入。 See https://ui-router.github.io/docs/latest/modules/ng1_state_events.html 参见https://ui-router.github.io/docs/latest/modules/ng1_state_events.html
For more information about migrating to 1.0, see this guide: https://ui-router.github.io/guide/ng1/migrate-to-1_0 有关迁移到1.0的更多信息,请参阅此指南: https : //ui-router.github.io/guide/ng1/migrate-to-1_0
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.