AngularJS использует родительскую директиву для обработки действия дочерней директивы

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 на активный. опять же, это было просто, используя свойство на моей виртуальной машине.

Однако, когда я установил элемент в действие, другие предметы должны стать неактивными.

поэтому я решил, что буду содержать список элементов родителя и использовать родительский элемент для обработки вызовов и очистки активных элементов в его списке.

У меня это работает, но мне это не кажется правильным.

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

Вы должны использовать изолированный объем с & для прохождения метод директивы & метода должны иметь on-click="main.drawLineChart()" функцию скобки, так что этот метод будет получить вызов, Внутри контроллере можно вызвать vm.onClick() вызвать метод директивного элемента.

scope: { 
    onClick: '&', 
    buttonClass: '@' 
} 

Markup

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