javascript - angularJS 中的 $broadcast 计时问题，如何确保在广播之前创建指令

Question

我在 angularJS 中遇到 $broadcast 问题。我的控制器使用 $compile 函数在页面加载时向 DOM 动态添加指令元素。

$('#container').prepend($compile('<myDirective></myDirective>')($scope));
$scope.$broadcast('loadIt', stuffIneedLoaded);

我想要做的是在创建指令时调用指令范围函数，所以我使用了 $broadcast。现在发生的情况是在指令完成渲染之前调用了 $broadcast，因此指令中的 scope.$on 永远不会听到广播。

从指令链接功能：

link: function (scope, element, attrs) {
        scope.$on('loadIt') = function (stuffToLoad) {
        //stuff to load
    }
}

我需要使用广播的原因是因为我需要从控制器发送指令数据。

http://jsfiddle.net/5ReCu/

小提琴不起作用，只是样板来帮助传达我的目标：

有任何想法吗？谢谢大家！

Answer 1

我会使用两个指令并从另一个调用一个。此外，编译后将调用调用广播的范围方法。就像是：

var fessmodule = angular.module('myModule', []);

fessmodule.controller('fessCntrl', function ($scope) {
    $scope.recall = function() {
        $scope.$broadcast('loadIt'); 
    }; 
});

fessmodule.$inject = ['$scope'];


fessmodule.directive("myDirective", function() {
    return {
        restrict: 'E',
        template: "<div>test code</div>",        
        link: function (scope, element, attrs) {
            scope.$on("loadIt", function() {
                 console.log('in myDirective on'); 
             });          

        }
    }
});

fessmodule.directive('directiveFoo', function($compile) {
    return {       
        controller: function() {
            console.log('in foo ctrl');            
        },
       link: function (scope, element, attrs) {
        var elem_0 = angular.element(element[0]);
        var a_input = angular.element($compile('<my-directive></my-directive>')(scope));
        elem_0.prepend(a_input);

           scope.recall();
        }
    }
});

演示Fiddle

作为旁注：

我强烈建议避免在控制器中进行任何 DOM 更新/操作。使用指令。通过这种方式，我们可以控制和跟踪呼叫队列的大多数问题。

Answer 2

这是旧的，但今天我以这种方式解决了类似的问题：

module.controller('moduleCtrl', function ($scope, $interval) {
    $scope.triggerEvent = function() {
        var promise =
            $interval(function () {
                if (scope.$$listenerCount["loadIt"] == null
                    || scope.$$listenerCount["loadIt"] === 0)
                    return;

                scope.$broadcast("loadIt");
                $interval.cancel(promise);
            }, 200);
    }; 
});