コンポーネントを属性として作成できますか？

debugcn 投稿 Dev

アンドリュー

親コンポーネントに自分自身を登録し、親の更新が呼び出されたときにその子に固有の情報を提供するコンポーネントを作成しようとしています。

親：

    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
    }

子：

    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());
    }

私の問題は、このような子タグを使用したいということです

<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>

これは、ng-modelを含むさまざまな要素にアタッチできる汎用の子コンポーネントで行うことができますか、それとも別のアプローチを見つける必要がありますか？

アンドリュー

私の答えを見つけました。コンポーネントは要素に制限されており、属性としての使用は許可されていません。属性として使用できるようにする場合は、ディレクティブにする必要があります。

ソース：https：//docs.angularjs.org/guide/component#creating-and-configuring-a-component

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]