how to call one controller from another controller in angularjs?

by
how to call one controller from another controller in angularjs

how to call one controller from another controller in angularjs via Create a service using angular’s factory e.g UserService.

how to call one controller from another controller in angularjs

Also Controllers can be attached to the DOM in different ways. AngularJs call one method of controller in another controller .

angularjs-app-modules-controllers-view
angularjs-app-modules-controllers-view

There can be multiple some difficlut situations where you may want a simple parent and child controller to be able to communicate with other main and sub controllers in your AngularJs Application.

Step : 1. $rootScope.$emit() and $rootScope.$broadcast()

how to call one controller from another controller in angularjs


    
 ng-controller="ProductCtrl" class="ng-scope">
      // ProductCtrl
      
 ng-controller="Sibling1" class="ng-scope">
        // Sibling first controller
      

      
 ng-controller="Sibling2" class="ng-scope">
        // Sibling Second controller
        
 ng-controller="category" class="ng-scope">
          // category controller

Laravel 6 Call controller method from another controller

Step : Angularjs Code

 var app =  angular.module('myApp',[]);//We will use it throughout the example 
    app.controller('category', function($rootScope) {
      $rootScope.$emit('categoryEmit', 'category calling Product');
      $rootScope.$broadcast('siblingAndProduct');
    });

app.controller('Sibling1', function($rootScope) {
  $rootScope.$on('categoryEmit', function(event, data) {
    console.log(data + ' Inside Sibling one');
  });
  $rootScope.$on('siblingAndProduct', function(event, data) {
    console.log('broadcast from category in Product');
  });
});

app.controller('Sibling2', function($rootScope) {
  $rootScope.$on('categoryEmit', function(event, data) {
    console.log(data + ' Inside Sibling two');
  });
  $rootScope.$on('siblingAndProduct', function(event, data) {
    console.log('broadcast from category in Product');
  });
});

app.controller('ProductCtrl', function($rootScope) {
  $rootScope.$on('categoryEmit', function(event, data) {
    console.log(data + ' Inside Product controller');
  });
  $rootScope.$on('siblingAndProduct', function(event, data) {
    console.log('broadcast from category in Product');
  });
});

Step : 3. If Second controller is category, you can use category Product communication

 ng-controller="ProductCtrl">
 
 ng-controller="categoryCtrl">

Angularjs

 app.controller('ProductCtrl', function($scope) {
   $scope.value='Its Product';
      });
  app.controller('categoryCtrl', function($scope) {
   console.log($scope.value);
  });

Step : 4.Use Services

app.service('communicate',function(){
  this.communicateValue='First';
});

app.controller('ProductCtrl',function(communicate){//Dependency Injection
  console.log(communicate.communicateValue+" Product Trans");
});

app.controller('categoryCtrl',function(communicate){//Dependency Injection
  console.log(communicate.communicateValue+" category Trans");
});

Step : 5.Kind of hack – with the help of angular.element()

 id='Product' ng-controller='ProductCtrl'>{{varProduct}}
  ng-click='getValueFromcategory()'>Click to get ValueFormcategory
 
 id='category' ng-controller='categoryCtrl'>{{varcategory}}
    ng-click='getValueFromProduct()'>Click to get ValueFormProduct

how to call one controller from another controller in angularjs

call one controller from another controller
call one controller from another controller
app.controller('ProductCtrl',function($scope){
 $scope.varProduct="First Product";
  $scope.getValueFromcategory=function(){
  var categoryScope=angular.element('#category').scope();
  console.log(categoryScope.varcategory);
  }
});

app.controller('CarentCtrl',function($scope){
 $scope.varcategory="First category";
  $scope.getValueFromProduct=function(){
  var ProductScope=angular.element('#Product').scope();
  console.log(ProductScope.varProduct);
  }
});

Related posts:

  1. how to call function in angularjs?
  2. Simple image upload with preview Angularjs example in PHP

Leave a Comment