CODEWITHSUNDEEP
angularjscontroller
NickF
NickF

Reputation: 5737

AngularJS - controllers communication

On my site I have the following structure

Header_controller:

myApp.controller('Header_controller',function($scope,$rootScope,$location,Genral_model){

    $scope.logout = function(){
        var data = {};
        $rootScope.$emit('logout_clicked', data);  // NOT WORKING
        $rootScope.$broadcast('logout_clicked', data); // NOT WORKING
    }

});

Users_controller:

myApp.controller('Users_controller', function ($scope,$rootScope,Users_model,$location,$state) {

    $rootScope.$on('logout_clicked', function(event, resp) {
        Users_model.unRegisterCookies();
    });
})

Users_model:

myApp.factory('Users_model', function($rootScope,$http,$cookies) {
  var factory={};

  factory.unRegisterCookies = function(){
      alert('log out');
  }


  return factory;
});

I'm trying to invoke unRegisterCookies function by sending broadcast from Header_controller to Users_controller, but it's doesn't work with emit and not with broadcast.

How to make it work?

Upvotes: 0

Views: 90

Answers (2)

Nicholas Hirras
Nicholas Hirras

Reputation: 2596

See this plnkr for working version of your code:

http://plnkr.co/edit/JN5yWBUjmjBh5m7FiQww

This is pretty identical to the code you posted and it's working. You might have some other error in your page. If you are in Chrome or FireFox, pull up the console and see what errors are being shown for your page.

html:

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script data-require="[email protected]" src="https://code.angularjs.org/1.2.28/angular-cookies.js" data-semver="1.2.28"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <div ng-controller="HeaderCtrl">
      <h1>Headers Controller</h1>
      <button ng-click="logout()">Log out</button>
    </div>
    <div ng-controller="UsersCtrl">
      <h1>Users Controller</h1>
    </div>

  </body>
</html>

script:

var myApp = angular.module('myApp', ['ngCookies']);

myApp.controller('HeaderCtrl', function($scope, $rootScope) {

  $scope.logout = function(){
      var data = {};
      $rootScope.$emit('logout_clicked', data);  // NOT WORKING
      $rootScope.$broadcast('logout_clicked', data); // NOT WORKING
  }  

});

myApp.controller('UsersCtrl', function($scope, $rootScope, Users_model) {

  $rootScope.$on('logout_clicked', function(event, resp) {
      Users_model.unRegisterCookies();
  });

});

myApp.factory('Users_model', function($rootScope,$http,$cookies) {
  var factory={};

  factory.unRegisterCookies = function(){
      alert('log out');
  }


  return factory;
});

Upvotes: 1

Nicholas Hirras
Nicholas Hirras

Reputation: 2596

This is the same basic code you're trying and it's working for me. Maybe there's an error somewhere else in your code?

http://plnkr.co/edit/SADWwkZWztoVJVjv0tKt

html:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <div ng-controller="HeaderCtrl">
      <p>Button has been hit {{counter}} times.</p>
    </div>
    <div ng-controller="UsersCtrl">
      <button ng-click="pushme()">Count Me In</button>
    </div>

  </body>
</html>

script:

var app = angular.module('plunker', []);

app.controller('HeaderCtrl', function($scope, $rootScope) {
  $scope.counter = 0;

  $rootScope.$on('countMeIn', function (event, data) {
    $scope.counter = $scope.counter + 1;
  });

});


app.controller('UsersCtrl', function($scope, $rootScope) {

  $scope.pushme = function() {
    $rootScope.$emit("countMeIn", {});
  };

});

Upvotes: 2

Related Questions