cannot call method from another controller in angularjs ionic framework

Question

I want to trigger/call the callkhs from LihatKhsController to KhsController:

function KhsController($scope, $rootScope){
     $scope.$emit('callkhs', {param:'test'});
}

and I try to get parameter from KhsController to LihatController:

function LihatKhsController($scope, $rootScope){
    $scope.$on("callkhs", function(event, data){
      console.log('halo callkhs', data.param); //not show
    });
}

please help me to solve this.

can u use Service..to call same function in both controller..!? — the_mahasagar, Dec 30 '15 at 05:02

Anik Islam Abhi · Answer 1 · 2015-12-31T01:55:52.730

If you use $scope.$emit, it'll notify only it's parent scope.

Like this

<div ng-contoller="LihatKhsController">
 <div ng-controller="KhsController">
 </div>
</div>

JS

function KhsController($scope, $rootScope){
     $scope.$emit('callkhs', {param:'test'});
}
function LihatKhsController($scope, $rootScope){
    $scope.$on("callkhs", function(event, data){
      console.log('halo callkhs', data.param); //not show
    });
}

Here KhsController will trigger LihatKhsController as LihatKhsController is prent of KhsController .

If you use $scope.$broadcast , it'll notify it's child

Like this

<div ng-contoller="KhsController">
 <div ng-controller="LihatKhsController">
 </div>
</div>

JS

function KhsController($scope, $rootScope){
     $scope.$emit('callkhs', {param:'test'});
}
function LihatKhsController($scope, $rootScope){
    $scope.$on("callkhs", function(event, data){
      console.log('halo callkhs', data.param); //not show
    });
}

Here KhsController will trigger LihatKhsController as KhsController is parent of LihatKhsController.

Both of them won't consider siblings controller Like

<div ng-contoller="KhsController">
</div>
 <div ng-controller="LihatKhsController">
 </div>

$emit and $broadcast is slightly different in rootScope.

If you use $rootScope.$emit, it'll only notify on $rootScope.$on.

If you use $rootScope.$broadcast,it'll not only notify on $rootScope.$on but also all $scope.$on.

Like this

function KhsController($scope, $rootScope){
     $rootScope.$broadcast('callkhs', {param:'test'});
}

function LihatKhsController($scope, $rootScope){
    $scope.$on("callkhs", function(event, data){
      console.log('halo callkhs', data.param);
    });
}

score 0 · Answer 2 · answered Dec 30 '15 at 03:28

0

Have you tried redux? It's a modern way to write applications that behave consistently. There is an redux angular bindings.

answered Dec 30 '15 at 03:28

stevemao

1,423
1
16
29

Angular has such tools by default. Angular does not need Redux. – Alexander Elgin Dec 30 '15 at 03:40
@AlexanderElgin This is wrong, redux is not a tool. You could use DI, `$broadcast`, `$scope` or anything to achieve this but @Anik is asking what's the best practice (the design pattern and maintainability of the code). redux is the modern way to do it. – stevemao Dec 30 '15 at 03:44
In Angular the best practice is to not use Redux – Alexander Elgin Dec 30 '15 at 03:46
Why? Redux is the reason why react is smashing everything else. – stevemao Dec 30 '15 at 03:47
React is popular because of it performance. Redux is just a tool used by React. But it is not required in Angular. – Alexander Elgin Dec 30 '15 at 03:49
As I said redux is a design pattern. Anything could use it. Using redux is more maintainable than any other patterns so far. – stevemao Dec 30 '15 at 03:51

score 0 · Answer 3 · answered Dec 30 '15 at 03:56

The other answers that use $rootScope.$broadcast and the associated $rootScope.$on will work, but I prefer using $rootScope.$emit in this situation. Considering you are listening from $rootScope, it doesn't make since to propagate the message down the entire scope tree. With $rootScope.$emit and $rootScope.$on, it's essentially a direct message. The performance benefit might be negligible but I see no downside to this approach.

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

app.controller("KhsController", function ($scope, $rootScope) {
  $scope.sendMessage = function() {
    $rootScope.$emit('message', 'message sent');
  }
});

app.controller("LihatKhsController", function ($scope, $rootScope) {
  $rootScope.$on("message", function($event, data) {
    $scope.received = data;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

<div ng-app="khsApp">
  <form ng-controller="KhsController">
    <button ng-click="sendMessage()">Send</button>
  </form>
  <div ng-controller="LihatKhsController">
   <span ng-bind="received"></span>
  </div>
</div>

cannot call method from another controller in angularjs ionic framework

3 Answers3