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?

Answer 1

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>

Answer 2

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.