AngularJS 1.5中的组件不监听来自$ scope的广播事件 [英] 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 () { };
    }
})();

在$ transitions.onSuccess（ui-router 1.0 Beta）上触发了状态改变事件。这里的代码：

The event 'state-changed' is triggered on $transitions.onSuccess (ui-router 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});

            }
            );




    }]);

广播实际上有效。无法在第一个状态播放。当主模块运行时，第一条指令是：$ state.go（'1'）;而且我无法检测到第一个状态。

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'); and I can't detect this first state.go. Further state.go are listened.

推荐答案

我要指出四件事：

1）'*'是一种全局模式，它与根级别的任何状态都匹配，但与子状态不匹配。也可以使用双星’**’来匹配子状态。 ui-router全局文档非常分散，不好意思。

1) '*' is a glob pattern which matches any state at the root level, but it doesn't match child states. Use double star '**' to match child states too. The ui-router glob documentation is scattered and not very good, sorry.

更好的是，默认值为：条件已经匹配任何状态，因此请使用 onSuccess（{}，...）。

Better yet, the default to: criteria already matches any state, so use onSuccess({}, ...).

此处记录在 https://ui-router.github.io/docs/latest/interfaces/transition.hookmatchcriteria.html

所有属性都是可选的。如果省略了任何属性，则将其替换为值true，并且始终匹配。

All properties are optional. If any property is omitted, it is replaced with the value true, and always matches.

2）如果在控制器，则应在销毁控制器作用域时注销该钩子。

2) If you create a hook in a controller, you should deregister that hook when the controller scope is destroyed.

var deregisterFn = $transitions.onBefore(...)
$scope.$on('$destroy', deregisterFn);

3）如果在初始化控制器之前（以及在onSuccess钩子寄存器之前）正在进行转换，则不会捕获初始转换。您可以从 $ state.transition && $ state.transition.promise

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. You can hook into the in-progress transition promise from $state.transition && $state.transition.promise

4）旧版 $ stateChange * 事件仍然可用，但是您必须选择加入。参见 https://ui-router.github.io/docs/latest/ modules / ng1_state_events.html

4) The legacy $stateChange* events are still available, but you have to opt-in. See https://ui-router.github.io/docs/latest/modules/ng1_state_events.html

有关迁移到1.0的更多信息，请参见以下指南： https://ui-router.github.io/guide/ng1/migrate-to-1_0

For more information about migrating to 1.0, see this guide: https://ui-router.github.io/guide/ng1/migrate-to-1_0

这篇关于AngularJS 1.5中的组件不监听来自$ scope的广播事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！