AngularJS 1.5 中的组件不监听来自 $scope 的广播事件

Question

我遇到了这个问题，我真的不知道如何解决。我有这个组件：

    (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 () { };
    }
})();

事件 'state-changed' 在 $transitions.onSuccess 上触发（ui-router 1.0 Beta）。这里的代码：

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 广播。当主模块运行时，第一条指令是：$state.go('1');我无法先检测到这个 state.go。进一步 state.go 被收听。

Answer 1

我不确定您是否遇到了与我类似的问题，在这种情况下，我希望我的发现对您有所帮助。我的问题的完整描述以及我找到的解决方案是 here.

简而言之，我在使用 $transitions 时遇到了一些问题，我发现在版本 1.0.0.beta1 中 to 和 from 参数不起作用.

所以，而不是

$transitions.onSuccess({to: '*', form: '*'}, function(){});

我正在使用

$transitions.onSuccess({}, function(){
    if($state.current.name == 'myState') // do stuff
});

Answer 2

我要指出四点：

1) '*' 是一个 glob 模式，它匹配根级别的任何状态，但不匹配子状态。也使用双星 '**' 来匹配子状态。 ui-router glob 文档分散且不是很好，抱歉。

更好的是，默认为：标准已经匹配任何州，所以使用 onSuccess({}, ...)。

这在此处记录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.

2) 如果您在控制器中创建一个挂钩，您应该在销毁控制器作用域时注销该挂钩。

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

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

挂钩正在进行的转换承诺

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

有关迁移到 1.0 的详细信息，请参阅此 guide：https://ui-router.github.io/guide/ng1/migrate-to-1_0

AngularJS 1.5 中的组件不监听来自 $scope 的广播事件

Component in AngularJS 1.5 doesn't listen Broadcasted event from $scope

javascript

broadcast

angularjs