How can I call an angular $scope function from a separate js file?

Question

I am debugging someone else's software. It uses Angular 1.5.9, which I am not very familiar with and I have not been able to find an answer to my questions.

I would like to call a $scope function that exists in a separate controller, from another controller in a separate js file.
The broadcast statement below throws an error and I am unsure as to why? "TypeError: Cannot read property '$broadcast' of null"

Here is the code:

CONTROLLER 1:

app.controller('FilterController', function ($scope, $filter, 
$uibModalInstance, errorService, dataService, values) {
    $scope.sortByColumn = function () {
      var data = { 'editorID': $scope.editorID(), 'filter': 
      dataService.data.objFilterColumns };

      dataService.getData('UpdateFilter', data).then(function (response) {
        $uibModalInstance.dismiss('cancel');

        //I WANT TO CALL THE SCOPE 'reloadData' FUNCTION HERE
        $scope.$emit('reloadData', data);

        //this broadcast statement was already there but it throws error 
        $scope.$parent.$broadcast('sortbyColumn', $scope.userFilters, $scope.column.strColumnName, $scope.orderDir, dataService.data.objFilterColumns);

    });
  });

CONTROLLER 2:

 app.controller("myCtrl", [
"$scope",
"$http",
"$uibModal",
"$log",
"$location",
"$window",
"dataService",
"errorService",
"lookupService"
, function ($scope, $http, $uibModal, $log, $location, $window, dataService, errorService, lookupService) {
    $scope.loadPage = function (data, message, removeFilter, byColumn, 
 orderDir) {
    //I want to call this function from the other controller 
  }

  $scope.$on("reloadData", function () {
     $scope.loadPage();
  });

  $scope.$on("sortbyColumn", function (event, filters, column, orderDir, filter) {
    //some code
  });
}]);

Thanks for your help

score 1 · Answer 1 · answered Aug 20 '19 at 07:58

You can use service:

app.service('someService', function () {
    this.loadPage = function (data, message, removeFilter, byColumn, orderDir) {
        //...
    };
});

And inject it into the controllers:

Controller1:

app.controller('FilterController',["$scope","someService" */andOther/*, function ($scope, someService) {
    $scope.sortByColumn = function () {
      var data = { 'editorID': $scope.editorID(), 'filter': 
      dataService.data.objFilterColumns };

      dataService.getData('UpdateFilter', data).then(function (response) {
        $uibModalInstance.dismiss('cancel');

       someService.loadPage(...parameters);


  });

Controller2:

 app.controller("myCtrl", ['$scope','someService' ,function($scope, someService){
    $scope.loadPage = someService.loadPage(data, message, removeFilter, byColumn, 
 orderDir);

}]);

From AngularJS docmentation:

AngularJS services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.

AngularJS services are:

Lazily instantiated – AngularJS only instantiates a service when an application component depends on it. Singletons – Each component dependent on a service gets a reference to the single instance generated by the service factory.

score 1 · Accepted Answer · answered Aug 20 '19 at 08:02

Define global javascript variables in your app.js file for each controller, something like given.

var PayRateScope, ManageResourceScope, sequenceScopePA;

Now in your controller, at end of defination of app.controller method, assign $scope to respective gloabal scope variable. for ex.

// Payrare Controller
app.controller('PayRateAdminController', function ($scope, $compile, $http, $timeout) {
   // your code and functions
  PayRateScope = $scope;
});

//ManageResource Contoller
app.controller('ManageResourceController', function ($scope, $compile, $http, $timeout) {
   // your code and functions
  ManageResourceScope = $scope;
});

Now you will be able to access functions inside respective controller using it global variable in any external js like,

PayRateScope.FunctionName();

Thank you, it worked and this seems like the most straightforward way of doing it — NickyLarson, Aug 20 '19 at 08:22

kamprasad · Answer 3 · 2019-08-20T07:58:46.673

0

Fist of all, you need to understand the different between $broadcast(), $emit() and $on()

$broadcast() - sends an even downwards from parent to child controllers.

$emit() - sends an event upwards from the current controller to all of its parent controllers

$on - An event raised by $broadcast() and $emit() can be handled by wiring an event handler using $on()

$scope.$parent - mean you access parent controller scope.This will help you to access variable and method in parent controller.

Looks like this. Hope this will make you clear on these terms.

edited Aug 20 '19 at 07:58

answered Aug 20 '19 at 07:53

kamprasad

608
4
12

Thanks, how do I determine which controller is the parent and which is the child? – NickyLarson Aug 20 '19 at 07:59
Try this plugin. http://ng-inspector.org/ – kamprasad Aug 20 '19 at 08:00

How can I call an angular $scope function from a separate js file?

3 Answers3