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 は私にとって壊れているようです)

私はこのチュートリアルに従っていました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

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 に答える