javascript - 具有相同功能的多个angularJS指令如何

Question

我有多个 angularJS 指令(使用 chart.js 的 Angular 版本之一)

现在我有几个函数需要在这些指令中使用。

什么是让我不再重复自己的好方法，所以从指令中删除代码并将其放在一个地方。因为该代码无论如何都是相同的。 我研究了作用域的继承，但还没有解决这个问题。

这是在多个指令中使用的代码:

        $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);
        }

一些 html:

    <div class="controls">
        <span class="btn_arrow previous inactive" ng-click="graphSelectorPrev()">Vorige</span>
        <p>{+ selector +}</p>
        <span class="btn_arrow next" ng-click="graphSelectorNext()">Volgende</span>
    </div>

感谢任何可以提供帮助的人!

Answer 1

首先，在这种情况下，您可以通过这种方式制作一些 DRY:

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);

}

我做了一个 JSFiddle给你。

但是有一个单独的指令可能也很好，我不能写因为我不知道你到底想要什么数据在 Controller 中。您可以阅读有关指令和数据绑定(bind)的信息 from the official docs .

也可以考虑使用 services当您希望多个 Controller /指令执行相同的操作时。

希望对你有所帮助。