2

Angular 1.5 application with a user input form. We have a custom shared component called a combo-box. It's essentially a drop-down selector but has css classes and a number of bells and whistles for displaying differently (typeahead, multiselect, etc), all based off of properties (inputs) set by the parent.

Once a value is selected in the combo-box component, it fires off an event to the parent, on-select. The parent will store the information regarding the selected element(s). The combo-box child also set's it's display showing the currently selected item.

This all works fantastic. One way flow of data from the parent to the child, and a single event that is published back to the parent. But, now I want the parent to be able to clear the child combo-boxes. The user may hit a 'reset form' button. I'm not sure of the best way to do this.

  • If I could just redraw the child component and cause it to $onInit again, this would work.
  • I could store boxValue in the parent, but this requires me to take a lot of the shared logic that is used in the combo-box and duplicate it over many forms/pages.

HTML template for combo-box.component.html (this is only part of it, to show the input box populated by the drop down selection):

<input type="text"
       id="boxValue"
       class="form-control dropdown-toggle"
       ng-click="$ctrl.toggleDropDown()"
       ng-model="$ctrl.boxValue"
       ng-disabled="!$ctrl.options || $ctrl.options.length === 0"
       readonly
       placeholder="{{$ctrl.boxLabel}}"
       autocomplete="off"
       ng-required="{{$ctrl.required}}"/>

Combo-box.component.js

var ComboBoxComponent = {
  restrict: 'E',
  transclude: true,
  bindings: {
    options: '<',
    label: '@',
    title: '@',
    groupBy: '@',
    multiselect: '<?',
    showCheckAll: '<?',
    showUncheckAll: '<?',
    disabled: '<?',
    required: '<?',
    onSelect: '&'
},
templateUrl: '/components/common/combo-box/combo-box.component.html',
controller: function($document, $element, $scope, $filter) {
  ...
  $ctrl.select = function(option) {
    if ($ctrl.multiselect) {
      $ctrl.selected.push(option);
      $ctrl.onSelect({ selectedOptions: $ctrl.selected });
    } else {
      $ctrl.selected = option;
      $ctrl.closeDropDown();
      $ctrl.onSelect({ selectedOption: $ctrl.selected });
    }
    setBoxValue();
  };

  function setBoxValue() {
    if ($ctrl.multiselect) {
      if ($ctrl.selected.length > 1) {
        $ctrl.boxValue = $ctrl.selected.length + ' items selected';
      } else {
        if ($ctrl.selected && $ctrl.selected.length > 0) {
          $ctrl.boxValue = $ctrl.selected[0][$ctrl.label];
        } else {
          $ctrl.boxValue = '';
        }
      }
    } else {
      $ctrl.boxValue = $ctrl.selected ? $ctrl.selected[$ctrl.label] : '';
    }
  }
}
Ryan Langton
  • 6,294
  • 15
  • 53
  • 103
  • 2
    Basically, you can either dispatch an event to the child components or expose some "API" from child components to the parent and use it whenever you need. Both scenarios are described in answers to the [How to call child scope function in parent scope](http://stackoverflow.com/questions/19038778/angularjs-how-to-call-child-scope-function-in-parent-scope) question. Question is about directives, but it is almost the same in this case. – fracz Jul 21 '16 at 21:43
  • 1
    I don't see how that solution applies. The selected answer uses $scope.$broadcast which we clearly don't want to use with components. The other two answers use $scope inheritance, which doesn't exist when using .component since we always operate in an isolate scope. – Ryan Langton Jul 22 '16 at 14:08

0 Answers0