Question

我有一个简单的服务/工厂：

angular.module('myapp').factory('User', ['$rootScope', function($rootScope) {
    return {
        hello: function() {
            console.log('Sending root scope message');
            $rootScope.$broadcast('saidhello', {greeting: 'hey'});
        }
    };
}]);

在我的控制器中，我只需调用hello方法：User.hello()，它会记录我的控制台消息。

我想在指令中选择这个，但它似乎不起作用......

angular.module('myapp').directive('user', ['User', function(User) {
    return {
        replace: true,
        restrict: 'EA',
        scope: true,
        link: ['scope', 'element', 'attrs', function(scope, element, attrs) {

            scope.$on('saidhello', function(event, data) {
                console.log('User said ' + data.greeting);
            });
        }]
    }
}]);

没有记录任何内容...我已经尝试在超时中包装广播以确保指令已加载但没有快乐。还尝试了$emit而不是$broadcast。

我的HTML就像这样：

<body>
    <div ng-controller="myController">
        <!-- Used to execute service -->
    </div>
    <user></user>
</body>

Answer 1

链接应该是一个功能，不应该吗？而不是数组，因为它的参数是静态的。

link: function(scope, element, attrs) {

    scope.$on('saidhello', function(event, data) {
        console.log('User said ' + data.greeting);
    });

    // say hello
    User.hello();
}

http://plnkr.co/edit/Shj112rfu6dyTcUHPVfM?p=preview

Answer 2

问题可归结为控制器必须在编译DOM之前运行才能创建视图所需的范围。

通过在控制器中立即调用事件，您可以在附加侦听器指令之前调用它。

当听众被附加时，事件已经结束

$ broadcast未在指令中被接收

2 个答案: