具有角度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

Answer 3

看看這個： AngularJS中控制器之間通信的正確方法是什么？ 然后： https ： //gist.github.com/floatingmonkey/3384419

我決定使用pubsub，這是我的實現：

CoffeeScript的：

module.factory "PubSub", ->
  cache = {}
  subscribe = (topic, callback) ->
    cache[topic] = [] unless cache[topic]
    cache[topic].push callback
    [ topic, callback ]
  unsubscribe = (topic, callback) ->
    if cache[topic]
      callbackCount = cache[topic].length
      while callbackCount--
        if cache[topic][callbackCount] is callback
          cache[topic].splice callbackCount, 1
    null
  publish = (topic) ->
    event = cache[topic]
    if event and event.length>0
      callbackCount = event.length
      while callbackCount--
        if event[callbackCount]
          res = event[callbackCount].apply {}, Array.prototype.slice.call(arguments, 1)
      # some pubsub enhancement: we can get notified when everything
      # has been published by registering to topic+"_done"
      publish topic+"_done"
      res

  subscribe: subscribe
  unsubscribe: unsubscribe
  publish: publish

使用Javascript：

module.factory("PubSub", function() {
  var cache, publish, subscribe, unsubscribe;
  cache = {};
  subscribe = function(topic, callback) {
    if (!cache[topic]) {
      cache[topic] = [];
    }
    cache[topic].push(callback);
    return [topic, callback];
  };
  unsubscribe = function(topic, callback) {
    var callbackCount;
    if (cache[topic]) {
      callbackCount = cache[topic].length;
      while (callbackCount--) {
        if (cache[topic][callbackCount] === callback) {
          cache[topic].splice(callbackCount, 1);
        }
      }
    }
    return null;
  };
  publish = function(topic) {
    var callbackCount, event, res;
    event = cache[topic];
    if (event && event.length > 0) {
      callbackCount = event.length;
      while (callbackCount--) {
        if (event[callbackCount]) {
          res = event[callbackCount].apply({}, Array.prototype.slice.call(arguments, 1));
        }
      }
      publish(topic + "_done");
      return res;
    }
  };
  return {
    subscribe: subscribe,
    unsubscribe: unsubscribe,
    publish: publish
  };
});

Answer 4

我的建議是不要自己創建一個。 使用像toastr這樣的現有模型或類似的東西。 http://beletsky.net/ng-notifications-bar/

Answer 5

如上所述，嘗試使用外部通知庫。 它們有很多種：

• http://alertifyjs.com/
• https://notifyjs.com/
• https://www.npmjs.com/package/awesome-notifications
• http://codeseven.github.io/toastr/demo.html