Notifications d'interface utilisateur avec js angulaires

- Je mettre en place un standard de notification de l'INTERFACE utilisateur avec angular js. Ma démarche est la suivante (simplifié):

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

Et avec le contrôleur de la page en cours:

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

Cela fonctionne bien. Mais je n'aime vraiment pas le fait que j'ai besoin d'appeler le $scope.$parent.

Parce que si je suis dans un autre imbriquée contrôleur, j'aurai $scope.$parent.$parent, et cela devient rapidement un cauchemar à comprendre.

Est-il une autre façon de créer ce genre de global INTERFACE utilisateur de notification angulaire?

source d'informationauteur standup75

  1. 17

    Utiliser les événements pour envoyer des messages à partir d'une composante à l'autre. De cette façon, les composants ne doivent pas être liées.

    Envoyer un événement à partir d'un composant:

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

    et de créer un "listener" partout où vous le souhaitez, par exemple, dans un autre composant:

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

    J'ai créé un exemple de travail pour vous à http://plnkr.co/edit/ywnwWXQtkKOCYNeMf0FJ?p=preview

    Vous pouvez également vérifier le AngularJS docs sur les étendues lire plus à propos de la syntaxe.

    Ce vous offre un environnement propre et rapide en seulement quelques lignes de code.

    Ce qui concerne,
    Jurgen

  2. 7

    Vous devriez vérifier ce:
    Un AngularJS composant pour créer facilement des notifications. Peuvent également utiliser HTML5 notifications.
    https://github.com/phxdatasec/angular-notifications

  3. 3

    Après avoir regardé cette: Quelle est la bonne façon de communiquer entre les contrôleurs de AngularJS? et alors que: https://gist.github.com/floatingmonkey/3384419

    J'ai décidé d'utiliser pubsub, voici mon oeuvre:

    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
};
});
  4. 0

    Ma suggestion est de ne pas en créer un sur votre propre. Utiliser des modèles existants toastr ou quelque chose comme ci-dessous.
    http://beletsky.net/ng-notifications-bar/

  5. 0

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