angularjs - 带有角度 js 的 UI 通知

Question

我必须用 Angular 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 通知？

score 17 · Accepted Answer

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

从一个组件发送事件：

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 文档，以了解有关实际语法的更多信息。

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

问候，于尔根

score 7 · Accepted Answer

你应该检查一下：一个用于轻松创建通知的 AngularJS 组件。也可以使用 HTML5 通知。 https://github.com/phxdatasec/angular-notifications

score 3 · Accepted Answer

看完这个：AngularJS中控制器之间通信的正确方法是什么？然后是：https ://gist.github.com/floatingmonkey/3384419

我决定使用 pubsub，这是我的实现：

咖啡脚本：

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
  };
});

score 1 · Accepted Answer

我的建议是不要自己创建一个。使用现有的模型，如 toastr 或类似下面的东西。 http://beletsky.net/ng-notifications-bar/

score 0 · Accepted Answer

如上所述，尝试使用外部通知库。它们种类繁多：

angularjs - 带有角度 js 的 UI 通知

5 回答 5

Related

Reference