showcase: controllers same level and $scope.$on

diff --git a/angularjs/showcase/src/showcase/app/users/users-child.controller.js b/angularjs/showcase/src/showcase/app/users/users-child.controller.js
index f866e2f..10c3045 100644 (file)
--- a/angularjs/showcase/src/showcase/app/users/users-child.controller.js
+++ b/angularjs/showcase/src/showcase/app/users/users-child.controller.js
@@ -10,10 +10,12 @@
    * @name app.users.controller:UsersChildController
    *
    * @requires $rootScope
+   * @requires $scope
    *
    * <p>
    * <br>
    * {@link https://docs.angularjs.org/api/ng/service/$rootScope $rootScope}
+   * {@link https://docs.angularjs.org/api/ng/type/$rootScope.Scope $scope}
    * </p>
    *
    * @description
@@ -26,10 +28,27 @@
       title: 'Snake and Scarlett',
       fact: 'it is canon'
     };
+    var scopeBroadcastToSecondChild = {
+      name: 'UsersChild To UsersSecondChild',
+      lastName: 'scope broadcasting to UsersSecondChild from UserChild',
+      city: 'UserChild'
+    };
+    var rootScopeBroadcastToSecondChild = {
+      name: 'UsersChild To UsersSecondChild',
+      lastName: 'rootscope broadcasting to UsersSecondChild from UserChild',
+      city: 'UserChild'
+    };
 
     vm.getEmit = function () {
       $scope.$emit(USERS.SCOPE.EMIT_FACT, emitFact);
     };
+    vm.broadcastToSencondChild = function () {
+      // $scope.$broadcast will never be seen by controllers in the same level as this controller. :(
+      $scope.$broadcast(USERS.SCOPE.BROADCAST_TO_SENCONDCHILD, scopeBroadcastToSecondChild);
+      // The only way is either using $rootScope or creating a new controllers hierarchy where
+      // UsersSecondChildController would be in a lower level than UsersChildController.
+      $rootScope.$broadcast(USERS.ROOTSCOPE.BROADCAST_TO_SENCONDCHILD, rootScopeBroadcastToSecondChild);
+    };
     vm.usersChildOnScopeBroadcast = function (events, broadcastUser) {
       vm.broadcastUser = broadcastUser;
       console.log('usersChildOnScopeBroadcast, events.name: ' + events.name);

diff --git a/angularjs/showcase/src/showcase/app/users/users-child.controller.spec.js b/angularjs/showcase/src/showcase/app/users/users-child.controller.spec.js
index d534ec4..d253c6b 100644 (file)
--- a/angularjs/showcase/src/showcase/app/users/users-child.controller.spec.js
+++ b/angularjs/showcase/src/showcase/app/users/users-child.controller.spec.js
@@ -15,6 +15,8 @@ describe('app.users', function() {
       $scope = $rootScope.$new();
 
       spyOn($scope, '$emit');
+      spyOn($rootScope, '$broadcast');
+      jasmine.createSpy($scope, '$scope.$broadcast');
       UsersChildController = $controller('UsersChildController', {
         $rootScope: $rootScope,
         $scope: $scope,
@@ -47,13 +49,34 @@ describe('app.users', function() {
         city: 'classified'
       };
       var event = {
-        name: 'USERS.ROOTSCOPE.BROADCAST'
+        name: USERS.ROOTSCOPE.BROADCAST
       };
 
       UsersChildController.usersChildOnScopeBroadcast(event, rootScopeBroadcastUser);
 
       expect(UsersChildController.broadcastUser).toEqual(rootScopeBroadcastUser);
     });
+
+    it('should be called $rootScope.$broadcast', function () {
+      var scopeBroadcastToSecondChild = {
+        name: 'UsersChild To UsersSecondChild',
+        lastName: 'scope broadcasting to UsersSecondChild from UserChild',
+        city: 'UserChild'
+      };
+      var rootScopeBroadcastToSecondChild = {
+        name: 'UsersChild To UsersSecondChild',
+        lastName: 'rootscope broadcasting to UsersSecondChild from UserChild',
+        city: 'UserChild'
+      };
+
+      UsersChildController.broadcastToSencondChild();
+
+      expect($rootScope.$broadcast).toHaveBeenCalledWith(
+        USERS.ROOTSCOPE.BROADCAST_TO_SENCONDCHILD, rootScopeBroadcastToSecondChild);
+      expect($scope.$broadcast).toHaveBeenCalledWith(
+        USERS.SCOPE.BROADCAST_TO_SENCONDCHILD, scopeBroadcastToSecondChild);
+    });
+
   });
 
 });

diff --git a/angularjs/showcase/src/showcase/app/users/users-second-child.controller.js b/angularjs/showcase/src/showcase/app/users/users-second-child.controller.js
new file mode 100644 (file)
index 0000000..c4bb43d
--- /dev/null
+++ b/angularjs/showcase/src/showcase/app/users/users-second-child.controller.js
@@ -0,0 +1,42 @@
+(function () {
+  'use strict';
+
+  angular
+    .module('app.users')
+    .controller('UsersSecondChildController', UsersSecondChildController);
+
+  /**
+   * @ngdoc controller
+   * @name app.users.controller:UsersSecondChildController
+   *
+   * @requires $scope
+   *
+   * <p>
+   * <br>
+   * {@link https://docs.angularjs.org/api/ng/type/$rootScope.Scope $scope}
+   * </p>
+   *
+   * @description
+   * UsersSecondChildController controller.
+   */
+  /* @ngInject */
+  function UsersSecondChildController($scope, USERS) {
+    var vm = this;
+
+    vm.usersSecondChildOnRootScopeBroadcast = function (events, rootScopeBroadcastUser) {
+      vm.rootScopeBroadcastUser = rootScopeBroadcastUser;
+      console.log('usersSecondChildOnRootScopeBroadcast, events.name: ' + events.name);
+    };
+    vm.usersSecondChildOnScopeBroadcast = function (events, scopeBroadcastUser) {
+      vm.scopeBroadcastUser = scopeBroadcastUser;
+      // You will never see this message because listening for $scope.$broadcast sent by
+      // controllers in the same level does not work.
+      console.log('usersSecondChildOnScopeBroadcast, events.name: ' + events.name);
+    };
+
+    $scope.$on(USERS.ROOTSCOPE.BROADCAST_TO_SENCONDCHILD, vm.usersSecondChildOnRootScopeBroadcast);
+
+    $scope.$on(USERS.SCOPE.BROADCAST_TO_SENCONDCHILD, vm.usersSecondChildOnScopeBroadcast);
+
+  }
+})();

diff --git a/angularjs/showcase/src/showcase/app/users/users-second-child.controller.spec.js b/angularjs/showcase/src/showcase/app/users/users-second-child.controller.spec.js
new file mode 100644 (file)
index 0000000..0b6f18d
--- /dev/null
+++ b/angularjs/showcase/src/showcase/app/users/users-second-child.controller.spec.js
@@ -0,0 +1,63 @@
+describe('app.users', function() {
+  'use strict';
+
+  var $rootScope;
+  var $scope;
+  var USERS;
+  var UsersSecondChildController;
+
+  beforeEach(function() {
+    module('app.users');
+
+    inject(function($controller, _$rootScope_, _USERS_) {
+      $rootScope = _$rootScope_;
+      USERS = _USERS_;
+      $scope = $rootScope.$new();
+
+      spyOn($scope, '$emit');
+      UsersSecondChildController = $controller('UsersSecondChildController', {
+        $rootScope: $rootScope,
+        $scope: $scope,
+        USERS: _USERS_
+      });
+    });
+  });
+
+  describe('UsersSecondChildController', function () {
+
+    it('should be created successfully', function () {
+      expect(UsersSecondChildController).toBeDefined();
+    });
+
+    it('should be assigned rootScopeBroadcastUser', function () {
+      var rootScopeBroadcastUser = {
+        name: 'UsersChild To UsersSecondChild',
+        lastName: 'rootscope broadcasting to UsersSecondChild from UserChild',
+        city: 'UserChild'
+      };
+      var event = {
+        name: USERS.ROOTSCOPE.BROADCAST_TO_SENCONDCHILD
+      };
+
+      UsersSecondChildController.usersSecondChildOnRootScopeBroadcast(event, rootScopeBroadcastUser);
+
+      expect(UsersSecondChildController.rootScopeBroadcastUser).toEqual(rootScopeBroadcastUser);
+    });
+
+    it('should be assigned broadcastUser', function () {
+      var scopeBroadcastUser = {
+        name: 'UsersChild To UsersSecondChild',
+        lastName: 'rootscope broadcasting to UsersSecondChild from UserChild',
+        city: 'UserChild'
+      };
+      var event = {
+        name: USERS.SCOPE.BROADCAST_TO_SENCONDCHILD
+      };
+
+      UsersSecondChildController.usersSecondChildOnScopeBroadcast(event, scopeBroadcastUser);
+
+      expect(UsersSecondChildController.scopeBroadcastUser).toEqual(scopeBroadcastUser);
+    });
+  });
+
+});

diff --git a/angularjs/showcase/src/showcase/app/users/users.constants.js b/angularjs/showcase/src/showcase/app/users/users.constants.js
index 6fa1c3a..4947956 100644 (file)
--- a/angularjs/showcase/src/showcase/app/users/users.constants.js
+++ b/angularjs/showcase/src/showcase/app/users/users.constants.js
@@ -5,10 +5,12 @@
     .module('app.users')
     .constant('USERS', {
       ROOTSCOPE: {
-        BROADCAST: 'USERS_ROOTSCOPE_BROADCAST'
+        BROADCAST: 'USERS_ROOTSCOPE_BROADCAST',
+        BROADCAST_TO_SENCONDCHILD: 'USERS_ROOTSCOPE_BROADCAST_TO_SENCONDCHILD'
       },
       SCOPE: {
-        EMIT_FACT: 'USERS_SCOPE_EMIT_FACT'
+        EMIT_FACT: 'USERS_SCOPE_EMIT_FACT',
+        BROADCAST_TO_SENCONDCHILD: 'USERS_SCOPE_BROADCAST_TO_SENCONDCHILD'
       }
     });
 

diff --git a/angularjs/showcase/src/showcase/app/users/users.controller.js b/angularjs/showcase/src/showcase/app/users/users.controller.js
index 71b7628..e6086ca 100644 (file)
--- a/angularjs/showcase/src/showcase/app/users/users.controller.js
+++ b/angularjs/showcase/src/showcase/app/users/users.controller.js
@@ -10,10 +10,12 @@
    * @name app.users.controller:UsersController
    *
    * @requires $rootScope
+   * @requires $scope
    *
    * <p>
    * <br>
    * {@link https://docs.angularjs.org/api/ng/service/$rootScope $rootScope}
+   * {@link https://docs.angularjs.org/api/ng/type/$rootScope.Scope $scope}
    * </p>
    *
    * @description

diff --git a/angularjs/showcase/src/showcase/app/users/users.html b/angularjs/showcase/src/showcase/app/users/users.html
index ca0f256..4627e0c 100644 (file)
--- a/angularjs/showcase/src/showcase/app/users/users.html
+++ b/angularjs/showcase/src/showcase/app/users/users.html
@@ -18,6 +18,26 @@
     <button type="button" class="btn btn-primary" ng-click="vm.getEmit()">
       $scope.$emit fact
     </button>
+    <br>
+    <button type="button" class="btn btn-primary" ng-click="vm.broadcastToSencondChild()">
+      $scope.$broadcast and $rootScope.$broadcast to second child
+    </button>
+  </div>
+  <div class="container" ng-controller="UsersSecondChildController as vm">
+    <br>
+    <label>secondchild $scope.$on listening for $rootScope.$broadcast from UsersChildController:</label>
+    <br>
+    <div>name = {{vm.rootScopeBroadcastUser.name}}</div>
+    <div>lastname = {{vm.rootScopeBroadcastUser.lastName}}</div>
+    <div>city = {{vm.rootScopeBroadcastUser.city}}</div>
+
+    <br>
+    <label>secondchild $scope.$on listening for $scope.$broadcast from UsersChildController, same level never works:</label>
+    <br>
+    <div>name = {{vm.scopeBroadcastUser.name}}</div>
+    <div>lastname = {{vm.scopeBroadcastUser.lastName}}</div>
+    <div>city = {{vm.scopeBroadcastUser.city}}</div>
+
   </div>
 
 </div>

diff --git a/angularjs/showcase/src/showcase/index.html b/angularjs/showcase/src/showcase/index.html
index cd6019f..0b2970c 100644 (file)
--- a/angularjs/showcase/src/showcase/index.html
+++ b/angularjs/showcase/src/showcase/index.html
@@ -63,6 +63,7 @@
     <script src="/src/showcase/app/users/users.route.js"></script>
     <script src="/src/showcase/app/users/users.controller.js"></script>
     <script src="/src/showcase/app/users/users.constants.js"></script>
+    <script src="/src/showcase/app/users/users-second-child.controller.js"></script>
     <script src="/src/showcase/app/users/users-child.controller.js"></script>
     <script src="/src/showcase/app/cars/cars.module.js"></script>
     <script src="/src/showcase/app/cars/cars.service.js"></script>