1

我有一个关于 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 对我来说似乎坏了 atm）

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

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

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

4

2 回答 2

1

我之前已经给出了修复#angularjs，但这里是为了后代：

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

问题在于它MainCtrl是在指令之前实例化的，因此在指令在 $scope 上设置监听器之前会触发 $scope 事件，因此指令永远不会在此处监听事件。

于 2013-10-19T14:44:13.003 回答
0

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

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

工作的笨蛋

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>
于 2013-10-19T03:18:32.433 回答