Convert notification directive and service to not use scope

Author: dgutride

src/notification/notification-list.html

@@ -1,5 +1,5 @@
-<div data-ng-show="notifications.data.length > 0">
-  <div ng-repeat="notification in notifications.data">
+<div data-ng-show="$ctrl.notifications.data.length > 0">
+  <div ng-repeat="notification in $ctrl.notifications.data">
     <pf-inline-notification pf-notification-type="notification.type"
                      pf-notification-header="notification.header"
                      pf-notification-message="notification.message"

src/notification/notification.js

@@ -103,6 +103,7 @@ angular.module('patternfly.notification').provider('Notifications', function ()
   this.delay = 8000;
   this.verbose = true;
   this.notifications = {};
+  this.notifications.data = [];
   this.persist = {'error': true, 'httpError': true};
 
   this.setDelay = function (delay) {
@@ -119,7 +120,7 @@ angular.module('patternfly.notification').provider('Notifications', function ()
     this.persist = persist;
   };
 
-  this.$get = ['$rootScope', '$timeout', '$log', function ($rootScope, $timeout, $log) {
+  this.$get = ['$timeout', '$log', function ($timeout, $log) {
     var delay = this.delay;
     var notifications = this.notifications;
     var verbose = this.verbose;
@@ -132,15 +133,8 @@ angular.module('patternfly.notification').provider('Notifications', function ()
       warn: { type: 'warning', header: 'Warning!', log: 'warn'}
     };
 
-    $rootScope.notifications = {};
-    $rootScope.notifications.data = [];
-
-    $rootScope.notifications.remove = function (index) {
-      $rootScope.notifications.data.splice(index, 1);
-    };
-
-    if (!$rootScope.notifications) {
-      $rootScope.notifications.data = [];
+    if (!notifications) {
+      notifications.data = [];
     }
 
     notifications.message = function (type, header, message, isPersistent, closeCallback, actionTitle, actionCallback, menuActions) {
@@ -156,7 +150,7 @@ angular.module('patternfly.notification').provider('Notifications', function ()
       };
 
       notification.show = true;
-      $rootScope.notifications.data.push(notification);
+      notifications.data.push(notification);
 
       if (!notification.isPersistent) {
         notification.viewing = false;
@@ -198,14 +192,15 @@ angular.module('patternfly.notification').provider('Notifications', function ()
     };
 
     notifications.remove = function (notification) {
-      var index = $rootScope.notifications.data.indexOf(notification);
+      var index = notifications.data.indexOf(notification);
       if (index !== -1) {
         notifications.removeIndex(index);
       }
     };
 
     notifications.removeIndex = function (index) {
-      $rootScope.notifications.remove(index);
+      //notifications.remove(index);
+      notifications.data.splice(index, 1);
     };
 
     notifications.setViewing = function (notification, viewing) {
@@ -215,20 +210,18 @@ angular.module('patternfly.notification').provider('Notifications', function ()
       }
     };
 
-    notifications.data = $rootScope.notifications.data;
-
     return notifications;
   }];
 
 });
 
 /**
  * @ngdoc directive
- * @name patternfly.notification.directive:pfNotificationList
+ * @name patternfly.notification.component:pfNotificationList
  * @restrict E
  *
  * @description
- * Using this directive automatically creates a list of notifications generated by the {@link api/patternfly.notification.Notification notification} service.
+ * Using this component automatically creates a list of notifications generated by the {@link api/patternfly.notification.Notification notification} service.
  *
  * @example
  <example module="patternfly.notification">
@@ -298,16 +291,14 @@ angular.module('patternfly.notification').provider('Notifications', function ()
 
  </example>
  */
-angular.module('patternfly.notification').directive('pfNotificationList', function () {
-  'use strict';
-
-  return {
-    restrict: 'E',
-    controller: NotificationListController,
-    templateUrl: 'notification/notification-list.html'
-  };
-
-  function NotificationListController ($scope, $rootScope) {
-    $scope.notifications = $rootScope.notifications;
+angular.module('patternfly.notification').component('pfNotificationList', {
+  templateUrl: 'notification/notification-list.html',
+  controller: function (Notifications) {
+    'use strict';
+    var ctrl = this;
+
+    ctrl.$onInit = function () {
+      ctrl.notifications = Notifications;
+    };
   }
 });

test/notification/notification.spec.js

@@ -19,42 +19,42 @@ describe('pf-notification', function () {
 
     it('should propagate to the $rootScope correctly', function () {
 
-      expect($scope.notifications.data.length).toBe(0);
+      expect(Notifications.data.length).toBe(0);
 
       Notifications.info('aloha');
 
-      expect($scope.notifications.data.length).toBe(1);
-      expect($scope.notifications.data[0].type).toBe('info');
-      expect($scope.notifications.data[0].message).toBe('aloha');
+      expect(Notifications.data.length).toBe(1);
+      expect(Notifications.data[0].type).toBe('info');
+      expect(Notifications.data[0].message).toBe('aloha');
 
       Notifications.warn('achtung');
 
-      expect($scope.notifications.data.length).toBe(2);
-      expect($scope.notifications.data[1].type).toBe('warning');
-      expect($scope.notifications.data[1].message).toBe('achtung');
+      expect(Notifications.data.length).toBe(2);
+      expect(Notifications.data[1].type).toBe('warning');
+      expect(Notifications.data[1].message).toBe('achtung');
 
       Notifications.success('allright');
 
-      expect($scope.notifications.data.length).toBe(3);
-      expect($scope.notifications.data[2].type).toBe('success');
-      expect($scope.notifications.data[2].message).toBe('allright');
+      expect(Notifications.data.length).toBe(3);
+      expect(Notifications.data[2].type).toBe('success');
+      expect(Notifications.data[2].message).toBe('allright');
 
       Notifications.error('noway');
 
-      expect($scope.notifications.data.length).toBe(4);
-      expect($scope.notifications.data[3].type).toBe('danger');
-      expect($scope.notifications.data[3].message).toBe('noway');
+      expect(Notifications.data.length).toBe(4);
+      expect(Notifications.data[3].type).toBe('danger');
+      expect(Notifications.data[3].message).toBe('noway');
 
       var httpResponse = {data:{message: 'http'}};
 
       Notifications.httpError('error', httpResponse);
 
-      expect($scope.notifications.data.length).toBe(5);
-      expect($scope.notifications.data[4].type).toBe('danger');
-      expect($scope.notifications.data[4].message).toBe('error (http)');
+      expect(Notifications.data.length).toBe(5);
+      expect(Notifications.data[4].type).toBe('danger');
+      expect(Notifications.data[4].message).toBe('error (http)');
 
       $timeout.flush();
-      expect($scope.notifications.data.length).toBe(2);
+      expect(Notifications.data.length).toBe(2);
     });
   });