Question

带有用户输入表单的Angular 1.5应用程序。我们有一个名为组合框的自定义共享组件。它本质上是一个下拉选择器，但有css类和许多用于显示不同的铃声和口哨（typeahead，multiselect等），所有这些都基于父级设置的属性（输入）。

在组合框组件中选择一个值后，它会在on-select上向父级触发一个事件。父母将存储关于所选元素的信息。组合框儿童还设置了显示当前所选项目的显示内容。

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

如果我可以重新绘制子组件并再次将其导入$ 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}}"/>

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

来自父母的Angular 1.5 clear子组件

0 个答案: