具有角度js的UI通知

Question

我必须使用角度js实现一些标准通知UI.我的方法如下(简化):

<div ng-controller="MainCtrl">
  <div>{{message}}</div>
  <div ng-controller="PageCtrl">
     <div ng-click="showMessage()"></div>
  </div>
</div>

并且页面控制器是:

module.controller("PageCtrl", function($scope){
  counter = 1
  $scope.showMessage = function(){
    $scope.$parent.message = "new message #" + counter++;
  };
});

这很好用.但我真的不喜欢我需要调用$ scope.$ parent.

因为如果我在另一个嵌套控制器中,我将拥有$ scope.$ parent.$ parent,这很快成为一个噩梦.

是否有另一种方法来创建这种带有角度的全局UI通知？

Answer 1

使用事件将消息从一个组件发送到另一个组件.这样,组件根本不需要相关.

从一个组件发送事件:

app.controller('DivCtrl', function($scope, $rootScope) {
  $scope.doSend = function(){
    $rootScope.$broadcast('divButton:clicked', 'hello world via event');
  }
});

并在任何你喜欢的地方创建一个监听器,例如在另一个组件中:

app.controller('MainCtrl', function($scope, $rootScope) {
  $scope.$on('divButton:clicked', function(event, message){
    alert(message);
  })
});

我已经在http://plnkr.co/edit/ywnwWXQtkKOCYNeMf0FJ?p=preview为您创建了一个工作示例

您还可以查看有关范围的AngularJS文档,以阅读有关实际语法的更多信息.

只需几行代码即可为您提供干净,快速的解决方案.

此致,约根

Answer 2

您应该检查:AngularJS组件,用于轻松创建通知.也可以使用HTML5通知. https://github.com/phxdatasec/angular-notifications