Question

我有flashmessages的指令

'use strict';

angular.module('diplomovaPraceFrontendApp')
.directive('flashMessages', () ->
    directive:
        restrict: 'E'
        replace: true
        template: '<div ng-repeat="m in messages" id="flash-messages">' +
                    '<div class="alert {{m.level}}">' +
                    '<span class="">{{m.text}}</span>' +
                    '</div>' +
                    '</div>'
        controller: ($scope, $rootScope) ->
            $rootScope.$on('flash:message', (_, messages, done) ->
                $scope.messages = messages
                done()
        )
)

当我在我的控制器中调用$ rootScope。$ emit（'flash：message'，messages，someFunction）;它没有被$ rootScope捕获。$ on（）在指令中设置，但如果我把它放在application.run（）中它可以正常工作。

我缺少什么想法？感谢您的任何建议

我编辑了这个问题：

我当然使用共享服务，这是我的代码http://pastie.org/private/es25rvo0zvejuw9yx3acja（对不起，gist.github.com似乎对我来说是打破的）

我正在关注本教程http://chiragchamoli.com/post/61277736964/building-a-flash-message-with-angular-js

虽然它似乎根本没有调用该指令，因为replace设置为true，我仍然在代码检查器中看到<flash-messages>。

Plunkr版本：http://plnkr.co/edit/buRaguEyTMuhUM9Z4Jsw?p=preview

Answer 1

我之前已经在#angularjs修了一个问题，但这是为了后人：

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

问题是MainCtrl在指令之前被实例化，所以$ scope事件在指令在$ scope上设置一个监听器之前被触发，所以指令永远不会在这里听到事件。

Answer 2

问题是你的非指令控制器函数在指令控制器之前被调用。因此，在指令注册警报之前发送消息。

对此的简单解决方案是使用共享服务，而不是使用事件。服务是单身人士，因此任何州都可以在该服务的所有用途之间共享。如果您的所有flashMessage指令都需要共享状态，则仅使用服务才有意义。如果此解决方案不符合您的需求，请帮助我更好地了解您的要求。

工作plunker

使用Javascript：

var app = angular.module('plunker', [])

.controller('MainCtrl', function ($scope, alertsService) {
    alertsService.add({
        text: 'I am an alert',
        level: 'high'
    });
})

.service('alertsService', function () {
    this.alerts = [];
    this.add = function (message) {
        this.alerts.push(message);
    }.bind(this);
})

.directive('flashMessages', function (alertsService) {
    return {
        restrict: 'E',
        replace: true,
        template: '<div ng-repeat="m in messages" id="flash-messages">' +
            '<div class="alert {{m.level}}">' +
            '<span class="">{{m.text}}</span>' +
            '</div>' +
            '</div>',
        scope: true,
        link: function ($scope) {
            $scope.messages = alertsService.alerts;
        }
    };
});

HTML：

  <body ng-controller="MainCtrl">
    <flash-messages></flash-messages>    
  </body>

在指令中设置捕获事件

2 个答案: