2

带有用户输入表单的 Angular 1.5 应用程序。我们有一个称为组合框的自定义共享组件。它本质上是一个下拉选择器，但具有 css 类和许多用于以不同方式显示的花里胡哨（提前输入、多选等），所有这些都基于父级设置的属性（输入）。

一旦在组合框组件中选择了一个值，它就会在选择时向父级触发一个事件。父级将存储有关所选元素的信息。组合框子项还设置了显示当前所选项目的显示。

这一切都很棒。从父级到子级的单向数据流，以及发布回父级的单个事件。但是，现在我希望父母能够清除子组合框。用户可以点击“重置表单”按钮。我不确定执行此操作的最佳方法。

  • 如果我可以重新绘制子组件并使其再次 $onInit，这将起作用。
  • 我可以将 boxValue 存储在父级中，但这需要我采用组合框中使用的大量共享逻辑并将其复制到许多表单/页面上。

combo-box.component.html 的 HTML 模板（这只是其中的一部分，用于显示由下拉选择填充的输入框）：

<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}}"/>

组合框.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] : '';
    }
  }
}
4

0 回答 0