Question

我有一个非常简单的指令，它基本上包含子指令，每次指令在单击时调用一个函数。

<yd-chart-selector>
    <yd-chart-selector-item button-class="column" on-click="main.drawColumnChart()"></yd-chart-selector-item>
    <yd-chart-selector-item button-class="web" on-click="main.drawSpiderChart()"></yd-chart-selector-item>
    <yd-chart-selector-item button-class="line" on-click="main.drawLineChart()"></yd-chart-selector-item>
</yd-chart-selector>

让这个指令以最简单的形式工作，即点击一个项目调用方法，很简单。

我还想将点击的yd-chart-selector-item设置为有效。再一次，这样做很简单，使用我的VM上的属性。

但是，当我将项目设置为活动时，其他项目将变为非活动状态。

所以我想我会在父级上维护一个项目列表，并使用父级来处理调用操作，并清除其列表中项目的活动状态。

我有这个工作，但对我来说感觉不对。

app.directive('ydChartSelector', chartSelector);

function chartSelector() {
    var directive = {
        template: '<div class="form-group graph-type-select pull-right" ng-transclude=""></div>',
        restrict: 'E',
        bindToController: true,
        link: link,
        controller: controller,
        controllerAs: 'vm',
        transclude: true
    };
    return directive;

    function controller() {
        var vm = this;
        vm.items = [];

        vm.addItem = addItem;
        vm.selectItem = selectItem;

        function addItem(item) {
            vm.items.push(item);

            if(vm.items.length === 1) {
                item.selected = true;
            }
        }

        function selectItem(item) {
            resetUi(vm);
            item.selected = true;
            item.onClick();
        }

    }

    function resetUi(vm) {
        vm.items.forEach(function(value) {
            value.selected = false;
        });
    }

}

app.directive('ydChartSelectorItem', chartSelectorItem);

function chartSelectorItem() {
    var directive = {
        template: '<button type="button" class="btn graph-type-btn" ng-class="[vm.buttonClass, {selected: vm.selected}]" ng-click="vm.f(this)"></button>',
        restrict: 'E',
        link: link,
        bindToController: true,
        controller: controller,
        controllerAs: 'vm',
        require: '^ydChartSelector',
        scope: {
            onClick: '@',
            buttonClass: '@'
        }
    };
    return directive;

    function link(scope, element, attrs, chartSelectorController) {
        chartSelectorController.addItem(scope.vm);
    }

    function controller() {
        var vm = this;
        vm.selected = false;
        vm.f = f;

        function f($scope) {
            $scope.$parent.$parent.vm.selectItem(vm);
        }
    }
}

困扰我的部分是：

function f($scope) {
    $scope.$parent.$parent.vm.selectItem(vm);
}

必须有更好的方法来做到这一点吗？

我尝试使用'&'和'@'组合尝试绑定到父级，但无法正确使用。

Answer 1

您应该使用vm.onClick()的隔离范围将方法传递给指令＆amp;方法应该有scope: { onClick: '&', buttonClass: '@' }函数括号，以便该方法可以调用，在你的控制器中你可以调用<yd-chart-selector> <yd-chart-selector-item button-class="column" on-click="main.drawColumnChart"> </yd-chart-selector-item> <yd-chart-selector-item button-class="web" on-click="main.drawSpiderChart()"> </yd-chart-selector-item> <yd-chart-selector-item button-class="line" on-click="main.drawLineChart()"> </yd-chart-selector-item> </yd-chart-selector>来调用指令元素的方法。

{{1}}

<强>标记

{{1}}

AngularJS使用父指令来处理子指令的操作

1 个答案: