it-swarm.com.de

UI-Benachrichtigungen mit eckigen js

Ich muss eine Standard-Benachrichtigungs-Benutzeroberfläche mit eckigem js implementieren. Mein Ansatz ist der folgende (vereinfachte):

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

Und mit dem Page Controller:

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

Das funktioniert gut. Aber die Tatsache, dass ich $ scope. $ Parent aufrufen muss, gefällt mir wirklich nicht.

Wenn ich mich in einem anderen verschachtelten Controller befinde, habe ich nämlich $ scope. $ Parent. $ Parent und dies wird schnell zu einem Albtraum.

Gibt es eine andere Möglichkeit, eine solche globale Benutzeroberflächenbenachrichtigung mit Angular zu erstellen?

12
standup75

Verwenden Sie Ereignisse, um Nachrichten von einer Komponente an eine andere zu senden. Auf diese Weise müssen die Komponenten überhaupt nicht in Beziehung gesetzt werden.

Senden Sie ein Ereignis von einer Komponente:

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

und erstellen Sie einen Listener an einer beliebigen Stelle, z. in einer anderen Komponente:

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

Ich habe ein Arbeitsbeispiel für Sie erstellt unter http://plnkr.co/edit/ywnwWXQtkKOCYNeMf0FJ?p=preview

Sie können auch in den AngularJS-Dokumenten zu Bereichen nachlesen, um mehr über die tatsächliche Syntax zu erfahren.

Dies bietet Ihnen eine saubere und schnelle Lösung in nur wenigen Codezeilen.

Grüße, Jürgen

17
jvandemo

Sie sollten Folgendes überprüfen: Eine AngularJS-Komponente zum einfachen Erstellen von Benachrichtigungen. Kann auch HTML5-Benachrichtigungen verwenden. https://github.com/phxdatasec/angular-notifications

7
Victor Landau

Nach dem Betrachten dieser: Was ist der richtige Weg, um zwischen Controllern in AngularJS zu kommunizieren? und dann das: https://Gist.github.com/floatingmonkey/3384419

Ich habe mich für pubsub entschieden. Hier ist meine Implementierung:

Kaffeeskript:

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

Versuchen Sie, wie oben vorgeschlagen, die externe Benachrichtigungsbibliothek zu verwenden. Es gibt eine Vielzahl von ihnen:

0
David Yunevich

Mein Vorschlag ist, keine eigene zu erstellen. Verwenden Sie vorhandene Modelle wie toastr oder ähnliches. http://beletsky.net/ng-notifications-bar/

0
Madura Pradeep