Angular JSのアプリケーション間でメッセージングサービスを作成する方法は？

Question

Googleと同様に、Webパネルの上部中央にエンドユーザーにメッセージを表示したいとします。

私はHTMLや関連スクリプトをどこにでもすべてのフォームやリスト、チャートに含めたくありません。私はこのメッセージング機能をどこでも使用できるサービス（Angular JS用語）に集中させたいと思っています。

Googleと同じように、メッセージにリッチテキストを表示できるようにしたい、つまりリンクや他のHTMLのものを含めたいと思っています。たとえば、Customer is definedを表示する代わりに、Customer is defined, <a href='#/customer/addPhone'>Now add a phone</a>を表示してユーザーをガイドしたいと考えています。

<div class="appMessages"> 
    <span ng-show="message" ng-click="clearMessage()" ng-bind-html="message"></span> 
</div> 

と私たちのコントローラーで

、我々は $rootScopeを注入し、その上に messageプロパティを設定しよう：私は何をやったか

は私の単一ページ化アプリケーションのルートレイアウトにメッセージHTMLを配置することです。

まだ結果はありません。私を助けてくれますか？

Answer 1

一般的なベストプラクティスとして、私は$ rootScopeを使ってメッセージを渡すのではなく、専用のサービスを使ってメッセージを更新します。 あなたの場合は、$sceサービスを使用してhtmlをマークする必要があるかもしれません信頼できる またはロードng-santizeモジュールの代わりに（あなたがsee offical docをロードする必要が別々のモジュールである）の角セキュリティがあなたのメッセージのソースは、あなたのコードからであれば、明示的にHTMLをチェックするためにあなたを必要とし、ないので、必要とされている

ユーザーはあなたが確かにそれが安全なhtmlを知っているのでtrustAsHtmlを使用することができますinupts。

コントローラで$ sceを注入してスコープにバインドし、$ sce.trustAsHtml（value）関数を使用します。

<div class="appMessages"> 
    <span ng-show="message" ng-click="clearMessage()" ng-bind-html="$sce.trustAsHtml(message)"></span> 
</div> 

angular.module('app', []) 
 
    .component('message', { 
 
    controller: function($sce, messagService){ 
 
    this.messagService = messagService; 
 
    this.$sce = $sce; 
 
    }, 
 
    template: '{{$ctrl.message}}<div ng-bind-html="$ctrl.$sce.trustAsHtml($ctrl.messagService.message)"></div>' 
 
}) 
 
.service('messagService', function(){ 
 
    this.message = ''; 
 
    this.updateMessage = function(message){ 
 
    this.message = message; 
 
    } 
 
}) 
 
.controller('mainCtrl', function($scope, messagService){ 
 
    $scope.updateMessage = function() { 
 
    messagService.updateMessage('wow <b style="color:yellow;">shiny</b> message'); 
 
    }; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
 
<div ng-controller="mainCtrl" ng-app="app"> 
 
<message></message> 
 
<button type="button" ng-click="updateMessage()"> update message</button> 
 
</div>