我可以一起使用$ emit / $ broadcast和callbacks吗？

Question

我正在处理我的第一个角度应用程序，并试图使其尽可能模块化。我的应用点击屏幕＆＃39;每个屏幕都有自己的控制器，基于其类型。屏幕内容来自api - text，image和audio。

我需要能够确定如何在页面上加载项目。我的API中有一个序列。

var sequence =  [
            [
                {
                    "item": 't1',
                    "type": 'fadeUp'
                }
            ],
            [
                {
                    "item": 't2',
                    "type": 'fadeUp'
                },
                {
                    "item": 'a1'
                }
            ],
            [
                {
                    "item": 't3',
                    "type": 'fadeUp'
                },
                {
                    "item": 'i1',
                    "type": 'fadeUp'
                },
                {
                    "item": 'a2'
                }
            ],
            [
                {
                    "item": 't4',
                    "type": 'fadeUp'
                }
            ]
        ];

此顺序中有4个步骤，我不希望它移动到下一个步骤，直到所有子项都完成。例如/不要进入下一步，直到音频播放完毕 - 我该怎么做？

目前我正在使用相关控制器拾取并显示内容的$ emit，但这一切都是立即发生的，因为我在没有任何延迟的情况下循环遍历阵列的第二级。我假设我需要使用$ q.all？但我不确定这会是什么样子？

我的代码的一个例子：我无法得到一个例子：（

厂：

(function () {
    "use strict";

    var sequenceFactory = function (clinicalCasesSettings, $rootScope, $timeout, utils, $q) {

        var factory = {};

        factory.startSequence = function (sequence, screen) {
            _.each(screen.sequence, function (sequencePos, i) {
                console.info('SEQUENCE ' + i);
                _.each(sequencePos, function (action) {
                    var actionType = _determineActionType(action.item);
                    $rootScope.$emit('start' + utils.ucFirst(actionType), i);

                });


            });
        }

        // helper methods for the factory
        function _determineActionType(item) {
            var actionType;
            actionType = item.replace(/[^a-zA-Z]+/g, "");
            return clinicalCasesSettings.actionTypes[actionType];
        }

        return factory;
    };

    sequenceFactory.$inject = ['clinicalCasesSettings', '$rootScope', '$timeout', 'utils', '$q'];

    angular.module('clinicalCases').factory('sequenceFactory', sequenceFactory);

}());

其中一个控制器监听$ emit

(function () {
    "use strict";
    var textImageController = function ($scope, $rootScope, $stateParams, $state, $timeout, sequenceFactory) {
        console.log('textImageController loaded');

        //@TODO I dont think this is the right way to do this?
        var inheritedScope = $scope.$parent.$parent;

        //Just in case another image sneaks in
        $scope.image = inheritedScope.screen.image[0].src;
        $scope.content = '';



        $rootScope.$on('startText', function (event, data) {
                $scope.content += inheritedScope.screen.textContent[data].content;
        });




        sequenceFactory.startSequence(inheritedScope.screen.sequence, inheritedScope.screen);

    };
    textImageController.$inject = ['$scope', '$rootScope', '$stateParams', '$state', '$timeout', 'sequenceFactory'];
    angular.module('clinicalCases').controller('textImageController', textImageController);
}());