how to reuse a function in multiple controllers

Question

I have multiple controllers for multiple routes:

app.controller('FirstController', function ($scope) {
  $scope.func = function () {
    console.log('route 1');
  }
}
app.controller('SecondController', function ($scope) {
  $scope.func = function () {
    console.log('route 2');
  }
}
...

and a directive that uses the $scope.func, this way:

app.directive('thedirective', function () {
  return {
    link: function (scope, $element, attrs) {
      $scope.func(attrs.thedirective);
    }
  }
});

$scope.func is different in each controller. I expect the $scope.func to log "route 1" when we are in route1 and FirstController is the current controller and to log "route 2" when in route 2, but only "rout 1" is what I get in console. may you please tell me why changing route doesn't change $scope of directive?

Gimel

Maybe my solution can help you? #26921571 – Muriah

Answer 1

Isolated Scope was what I used for reusing a function which is defined differently is multiple controllers.
according to docs, when you isolate the scope of directives like:

scope: {
  myIsolatedFunc: '='
}

Angular will look up the current scope for a property named as the value of myIsolatedFunc property of element. meaning that:

if you have a function named $scope.func1 and an element defined as:

<div myIsolatedFunc="func1">

and in another route with another controller a function like $scope.func2 along with an element defined as:

<div myIsolatedFunc="func2">

you can use both of the functions in a directive:

app.directive('thedirective', function () {
  return {
    scope: {
      myIsolatedFunc: '='
    },
    link: function (scope, $element, attrs) {
      $scope.myIsolatedFunc(attrs.thedirective);
    }
  }
});

not to mention there is no need to have different names for different functions.

Gimel

Sorry for the delay in answering. – Gimel

Answer 2

In AngularJS if function is being used common in controllers.

Best practises is use service or factory which will inject to controller.

app.factory('commonService', function ($scope) {
     var obj= {};
      obj.func = function () {
        console.log('route 1');
      }
     obj.func1 = function () {
        console.log('route 2');
      }
  return obj;
    }
    app.controller('FirstController', function ($scope,commonService) { 
        console.log('route 1' + commonService.func());  
    }
    app.controller('SecondController', function ($scope,commonService) { 
        console.log('route 2' + commonService.func1());  
    }

And when we talk about directive ,scope of the directive will be with one controller either directive controller or outside controller which we defined.

<div ng-controller="firstController">
<your-directive />
</div>

<div ng-controller="secondController">
<your-directive />
</div>

Kevel

what if the function needs to do something with the scope? Is it okay to just pass the $scope as argument? – Nordstrom

$scope is costly it should be used in controller. if you think the function needs scope value, make sure you send parameter to the service as $scope.testData. in angular 1.4 and above no more scope everything this object. – Kevel