javascript - 类似 Angular.js (1.6) 组件的 Angular `<ng-content>` 之类的东西？

Question

是否有类似 Angular <ng-content> 的东西对于 Angular.js 组件不使用 transinclude ？

我尝试使用一些结构组件(row-div+label+error+help-popup)来处理不同的填充(选择、输入、复选框、单选按钮等)，并希望有一个组件可以帮助提供布局以及其中提供自定义输入的布局。

我想使用的代码类似于:

html

<form-row input-id="someId" input-name="">
  <form-row-input-typeahead ng-model="some.thing"></form-row-input-typeahead>
</form-row>

formRow.html 和 .js

 <div class="form-row" ng-form="row"
     ng-class="{'form-row-error' : $ctrl.isInvalid()}">
    <label ng-attr-for="{{$ctrl.inputId}}">
        <span translate="{{$ctrl.label}}"></span>
    </label>
    <div class="form-row-input">
        <ng-content></ng-content>
    </div>
    <div class="form-row-error">
        <p class="form-error--msg"
           ng-show="$ctrl.isInvalid()"
           translate="{{$ctrl.errorMessage}}">
        </p>
    </div>
</div>

"use strict";
import module from './module';
import formRowHtml from './formRow.html';

FormRowController.$inject = ['$scope'];
function FormRowController($scope) {
  const ctrl = this;
  ctrl.isInvalid = isInvalid;

  function isInvalid() {
    return $scope.row[ctrl.inputName].$invalid && $scope.row[ctrl.inputName].$touched;
  }
}

export default module.component('formRow', {
  template: formRowHtml,
  controller: FormRowController,
  bindings: {
    inputName: '<',
    inputId: '<',
  }
});

formRowInputTypeahead.html 和 .js

<input type="text" name="{{$ctrl.row.inputName}}"
   ng-attr-id="{{$ctrl.row.inputId}}"
   ng-model="$ctrl.ngModel"
   uib-typeahead="option for option in $ctrl.options | filter:$viewValue | limitTo:5"
   ng-change="$ctrl.ngChange"
   ng-required="$ctrl.ngRequired">

"use strict";
import module from './module';
import formRowInputTypeaheadHtml from './formRowInputTypeahead.html';
import angular from 'angular';

FormRowInputTypeaheadController.$inject = ['$scope'];
function FormRowInputTypeaheadController($scope) {
  const ctrl = this;
  ctrl.$onInit = $onInit;

  function $onInit() {
    if (angular.isUndefined(ctrl.ngRequired) || ctrl.ngRequired === null)
      ctrl.ngRequired = true;
  }
}

export default module.component('formRowInputTypeahead', {
  template: formRowInputTypeaheadHtml,
  controller: FormRowInputTypeaheadController,
  require: {
    row: '^formRow',
  },
  bindings: {
    ngModel: '=',
    ngChange: '<',
    ngRequired: '<',
    options: '<',
  }
});

Answer 1

我的解决方案是仅使用<ng-transclude> 。

它的工作原理不需要指令中所需的范围解析思维扭曲，因为组件总是定义自己的范围。因此，这似乎是干净而简单的解决方案。

formRow.html 和 .js

 <div class="form-row" ng-form="row"
     ng-class="{'form-row-error' : $ctrl.isInvalid()}">
    <label ng-attr-for="{{$ctrl.inputId}}">
        <span translate="{{$ctrl.label}}"></span>
    </label>
    <div class="form-row-input">
        <ng-transclude></ng-transclude>
    </div>
    <div class="form-row-error">
        <p class="form-error--msg"
           ng-show="$ctrl.isInvalid()"
           translate="{{$ctrl.errorMessage}}">
        </p>
    </div>
</div>

"use strict";
import module from './module';
import formRowHtml from './formRow.html';

FormRowController.$inject = ['$scope'];
function FormRowController($scope) {
  const ctrl = this;
  ctrl.isInvalid = isInvalid;

  function isInvalid() {
    return $scope.row[ctrl.inputName].$invalid && $scope.row[ctrl.inputName].$touched;
  }
}

export default module.component('formRow', {
  template: formRowHtml,
  transclude: true,
  controller: FormRowController,
  bindings: {
    inputName: '<',
    inputId: '<',
  }
});