Question

我想在网络面板的顶部中心向最终用户显示消息，就像谷歌一样。

我不想在每种形式的列表和图表中包含HTML和相关脚本。我想将这种消息传递功能集中到一个可以在任何地方使用的服务（在Angular JS术语中）。

就像谷歌一样，我希望能够在我的消息中显示富文本，也就是说，我希望在那里包含链接和其他HTML内容。例如，我想显示Customer is defined来指导用户，而不是显示Customer is defined, <a href='#/customer/addPhone'>Now add a phone</a>。

我所做的是将消息HTML放在我的单页应用程序的根布局中：

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

在我们的控制器中，我们注入$rootScope并尝试在其上设置message属性。

然而我没有结果。你能指导我吗？

Answer 1

作为一般的最佳实践，我会避免使用$ rootScope传递消息，而是使用专用服务来更新消息，在您的情况下，问题可能是您需要使用角度$sce服务将您的HTML标记为受信任。或者加载ng-santize模块（这是一个需要加载see offical doc的单独模块）

这是必要的，因为角度安全性要求您明确检查html，如果您的消息来源仅来自您的代码，而不是用户进入，您可以使用trustAsHtml，因为您知道这是安全的HTML。

在你的控制器上注入$ 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>

如何在Angular JS中跨应用程序创建消息传递服务？

1 个答案: