Angular.js（1.6）コンポーネントの角度「<ng-content>」のようなものはありますか？

Question

Angular.jsコンポーネントの角度が<ng-content>のようなものがありますか？を使用しないで？

さまざまなフィリング（選択、入力、チェックボックス、ラジオなど）を扱うために、いくつかの構造コンポーネント（行div +ラベル+エラー+ヘルプポップアップ）を取得しようとしています。カスタム入力を提供するレイアウトを提供する。

私が使用したいコードのようなものです：

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: '<', 
    } 
});