我可以将组件创建为属性吗？

Question

I'm trying to create a component that will register itself with a parent component and provide it with information specific to that child when the parent update is called.

parent:

    angular
    .module('app')
    .component('parentComponent', {
        templateUrl: function ($attrs) {
            return '/Components/Component/template.cshtml';
        },
        bindings: {
            api: "=",
        },
        controller: controller
    });

function controller() {
    var vm = this;
    vm.subscribedApis = [];

    vm.$onInit = function () {
        vm.api.register = register;
        vm.api.update = update;
        vm.api.performOperation = performOperation;
    };

    function update() {
        vm.subscribedApis.forEach(function (api) {
            api.update();
        });
    }

    function register(api) {
        vm.subscribedApis.push(api);
    }

    function performOperation(viewValue){
        //do something given the childs value
    }

child:

    angular
    .module('app')
    .component('childComponent', {
        require: ['^parentComponent', 'ngModel'],
        bindings: {
            parentApi: "<",
        },
        link: function (scope, element, attrs, controller) {
            controller.getViewValue = function () {
                return ngModel.$viewValue;
            }
        },
        controller: childController
    });

function childController() {
    var vm = this;
    vm.$onInit = function () {
        vm.api = {};
        vm.api.update = update;
        vm.parentApi.register(vm.api);
        update();
    };
    function update() {
        var tag = filterTagApi.performOperation(vm.getViewValue());
    }

my problem is that I wish to use the child tag like this

<input type="text" id="title" class="form-control input-sm"
       ng-model="search.parameters.title" autofocus
       child-component parent-api="parentApi" />

<select class="form-control input-sm" ng-model="search.parameters.typeId"
        ng-options="lookup.id as lookup.lookupValue for lookup in lookups.typesOfSomething"
        child-component parent-api="parentApi">
    <option value="" selected>All</option>
</select>

Is this possible to do with a generic child component that I can attach to different elements containing an ng-model, or do I need to find a different approach?

Answer 1

Found my answer. Components restrict to elements and do not allow for usage as an attribute. I'll have to make it a directive if I want it available as an attribute.

Source: https://docs.angularjs.org/guide/component#creating-and-configuring-a-component