Multiple angularJS directives that have the same functions how to

First of all, in this case you can make some DRY this way:

HTML:

<div class="controlls"> <span class="btn_arrow previous inactive" ng-click="graphSelectorInc(-1)">Vorige</span>

    <p>{{ selector }}</p> <span class="btn_arrow next" ng-click="graphSelectorInc(+1)">Volgende</span>

</div>

JS:

//Warning this approach is so called not monomorh(polymorph): the parameter of function is not strictly typed, so it lacks browser optimizations but in this case its not so important because code won't run often
$scope.graphSelectorByAny = function (step) {
    switch (step) {
        case ('byPeriod'):
        case (0):
            $scope.selector = 'byPeriod'
            $scope.graphData = $scope.allGraphData.byPeriod;
            $scope.graphType = 'Line';
            break;
        case ('byDay'):
        case (1):
            $scope.selector = 'byDay'
            $scope.graphData = $scope.allGraphData.byDay;
            $scope.graphType = 'Line';
            break;
        case ('byHour'):
        case (2):
            $scope.selector = 'byHour'
            $scope.graphData = $scope.allGraphData.byHour;
            $scope.graphType = 'Bar';
            break;
    }
}

$scope.graphSelectorInc = function (inc) {
    $scope.graphSelectorIndex += inc;
    if ($scope.graphSelectorIndex < 0) {
        $scope.graphSelectorIndex = $scope.graphSelector.length - 1;
    } else if ($scope.graphSelectorIndex >= $scope.graphSelector.length) {
        $scope.graphSelectorIndex = 0;
    }
    $scope.graphSelectorByAny($scope.graphSelectorIndex);
    console.log($scope.graphSelectorIndex);

}

I've made a JSFiddle for you.

But it cound be also good to have a separate diretive, I cant's write cause I don't know what data do you exectly want to be in the controller. Yo can read about directives and data binding from the official docs.

Also consider using services whem you want multiply controllers/directives to do same things.

Hope it will help you.

Without knowing the exact difference between the directives (maybe you don't even need multiple) I would suggest to use a service or simply create a controller and add it to the directive template.

I would only go for the services if you get some benefits of sharing the state between the directives, otherwise I would go for the controller.

Here is a short example what I mean by 'using a controller' (test on jsfiddle):

angular.module('myApp', [])
.controller('sharedCtrl', function() {
    var self = this;

    // $scope.doIt = ...
    self.doIt = function (msg) {
      alert(msg);
    };
})
.directive('dir1', function () {
    return {
        restrict: 'E',
        template: '<div ng-controller="sharedCtrl as ctrl"><button ng-click="ctrl.doIt(msg)">dir1</button></div>',
        scope: {},
        link: function (scope) {
            scope.msg = 'Hi, I\'m dir1!';
        }
    };
})
.directive('dir2', function () {
    return {
        restrict: 'E',
        template: '<div ng-controller="sharedCtrl as ctrl"><button ng-click="ctrl.doIt(msg)">dir2</button></div>',
        scope: {},
        link: function (scope) {
            scope.msg = 'Hi, I\'m dir2!';
        }
    };
});

If you need to pass stuff from the directive scope you can pass it simply to the controller functions.

P.S.: I'm prefer the controller as syntax instead of using $scope. If you aren't familiar with it you can replace self with $scope, but I suggest to looking further into controller as.

You could create a shared controller containing the re-usable logic and then dynamically link it to you directive.

So your controller would be:

app.controller('sharedCtrl', function($scope) {
    $scope.widgetData = false;
    $scope.graphData = false;
    $scope.graphSelectorIndex = 0;

    $scope.graphSelector = [
        { 'byPeriod' : 'Periode'},
        { 'byHour' : 'Uur' },
        { 'byDay' : 'Dag'}
    ];

    $scope.graphSelectorByText = function (text) {
        switch (text) {
            case ('byPeriod'):
                $scope.selector = 'byPeriod'
                $scope.graphData = $scope.allGraphData.byPeriod;
                $scope.graphType = 'Line';
                break;
            case ('byDay'):
                $scope.selector = 'byDay'
                $scope.graphData = $scope.allGraphData.byDay;
                $scope.graphType = 'Line';
                break;
            case ('byHour'):
                $scope.selector = 'byHour'
                $scope.graphData = $scope.allGraphData.byHour;
                $scope.graphType = 'Bar';
                break;
        }
    }

    $scope.graphSelectorByInt = function (int) {
        switch (int) {
            case (0):
                $scope.selector = 'byPeriod';
                $scope.graphData = $scope.allGraphData.byPeriod;
                $scope.graphType = 'Line';
                break;
            case (1):
                $scope.selector = 'byDay';
                $scope.graphData = $scope.allGraphData.byDay;
                $scope.graphType = 'Line';
                break;
            case (2):
                $scope.selector = 'byHour';
                $scope.graphData = $scope.allGraphData.byHour;
                $scope.graphType = 'Bar'
                break;
        }
    }

    $scope.graphSelectorPrev = function () {
        $scope.graphSelectorIndex--;
        if ($scope.graphSelectorIndex < 0) {
            $scope.graphSelectorIndex = $scope.graphSelector.length-1;
        }
        $scope.graphSelectorByInt($scope.graphSelectorIndex);
        console.log($scope.graphSelectorIndex);

    }

    $scope.graphSelectorNext = function () {
        $scope.graphSelectorIndex++;
        if ($scope.graphSelectorIndex >= $scope.graphSelector.length) {
            $scope.graphSelectorIndex = 0;
        }
        $scope.graphSelectorByInt($scope.graphSelectorIndex);
        console.log($scope.graphSelectorIndex);
    }

});

And your directives would look like this:

app.directive('myDirective', function() {
    return {
         restrict: 'E',
         controller: '@',
         name: 'myDirectiveCtrl',
         link: function($scope, $element, $attrs) {
             // add directive specific logic
         }
    }
});

Then the markup looks like this:

<my-directive my-directive-ctrl="sharedCtrl"></my-directive>