12
votes

Notifications d'interface utilisateur avec JS angulaires

Je dois mettre en œuvre une interface utilisateur de notification standard avec des JS angulaires. Mon approche est la suivante (simplifiée): xxx

et avec le contrôleur de page étant: xxx

Cela fonctionne bien. Mais je n'aime vraiment pas le fait que j'ai besoin d'appeler $ portée. $ Parent.

Parce que si je suis dans un autre contrôleur imbriqué, je vais avoir une portée. $ Parent. $ Parent, et ceci devient rapidement un cauchemar pour comprendre.

existe-t-il une autre façon de créer ce type de notification mondiale d'interface utilisateur avec angulaire?

angularjs

1 commentaires

Essayez de créer un service qui contiendrait vos messages et d'injecter le service aux deux contrôleurs. Juste Google pour "Communiquer les contrôleurs angularjs", il montrera des tonnes de liens.

5 Réponses :

3
votes

Après avoir regardé ceci: Quelle est la bonne façon Pour communiquer entre les contrôleurs en angularjs? , puis que: https://gist.github.com / flottantmonkey / 3384419

J'ai décidé d'utiliser pubsub, voici ma mise en œuvre: p>

Coffeescript: P>

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

1 commentaires

J'utilise pubsub pour communiquer entre les contrôleurs et cela fonctionne assez bien.

17
votes

Utilisez des événements pour envoyer des messages d'un composant à un autre. De cette façon, les composants n'ont pas besoin d'être liés du tout.

Envoyer un événement d'un composant: p> xxx pré>

et créer un auditeur partout que vous aimez, par exemple. Dans un autre composant: p>

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

0 commentaires

7
votes

Vous devriez vérifier ceci: Un composant angularjs pour créer facilement des notifications. Peut également utiliser des notifications HTML5. https://github.com/phxdataSec/angular-notifications

1 commentaires

Ce projet semble être abandonné. Quelqu'un d'autre a pris la maintenance et a fusionné plusieurs PR à l'adresse suivante: github.com/phxdatasec/angular-notifications. Voir Annonce à: GITUB.COM/DEREKRIES/ANGULAIRE-NOTTIFICATIONS/RISSUS/13

1
votes

Ma suggestion est de ne pas créer un seul. Utilisez des modèles existants comme Toastr ou quelque chose comme ci-dessous. http://beletsky.net/ng-notiformations-bar/

0 commentaires

0
votes

Comme suggéré ci-dessus, essayez d'utiliser une bibliothèque de notifications externes. Il y a une grande variété d'entre eux:

0 commentaires