Question

我对将require: {}属性实现为角度组件的一部分感到高兴。请允许我演示一下我的例子。

这是应该获取判断列表的组件/指令。没什么特别的，只是一个简单的工厂电话。

// judgements.component.js
function JudgementsController(GetJudgements) {
    var ctrl = this;

    ctrl.Get = function () {
        GetJudgements.get().$promise.then(
            function (data) {
                ctrl.Judgements = data.judgements;
            }, function (error) {
                // show error message
            });
    }

    ctrl.$onInit = function () {
        ctrl.Get();
    };
}

angular
    .module('App')
    //.component('cJudgements', {
    //    controller: JudgementsController,
    //});
    .directive('cJudgements', function () {
        return {
            scope: true,
            controller: 'JudgementsController',
            //bindToController: true,
        };
    });

我正在尝试实现组件需要属性，以便从上面的组件/指令中访问ctrl.Judgements，如下所示：

// list.component.js
function ListController(GetList, GetJudgements) {
    var ctrl = this;
    ctrl.list = [];

    ctrl.Get = function () {
        GetList.get().$promise.then(
            function (data) {
                ctrl.list = data.list;
            }, function (error) {
                // show error message
            });
    };

    //ctrl.GetJudgements = function () {
    //    GetJudgements.get().$promise.then(
    //        function (data) {
    //            ctrl.Judgements = data.judgements;
    //        }, function (error) {
    //            // show error message
    //        });
    //}

    ctrl.$onInit = function () {
        ctrl.Get();
        //ctrl.GetJudgements();
    };
}

angular
    .module('App')
    .component('cTheList', {
        bindings: {
            listid: '<',
        },
        controller: ListController,
        controllerAs: 'ctrl',
        require: {
            jCtrl: 'cJudgements',
        },
        template: `
            <c-list-item ng-repeat="item in ctrl.list"
                         item="item"
                         judgements="ctrl.Judgements"></c-list-item>
           <!--
           obviously the reference to judgements here needs to change
           or even better to be moved into require of cListItem component
           -->
        `,
    });

美好而简单没有魔法涉及。敏锐的读者可能会在GetJudgement中注意到ListController服务电话。这就是我尝试使用require属性从TheList组件中删除的内容。

原因？其实很简单。我想尽可能地阻止数据库受到判决请求的打击。它是一个静态列表，实际上没有必要为每个应用实例多次请求它。

到目前为止，我只是成功收到以下错误消息：

Error: $compile:ctreq
Missing Required Controller
Controller 'cJudgements', required by directive 'cTheList', can't be found!

谁能看到我做错了什么？

PS：我使用角1.5 PSS：我不介意cJudgement实现的方式（指令或组件） PSSS：如果有人想知道我尝试过使用jCtrl: '^cJudgements' PSSSS：为了以防万一，还有多个^。

修改

@Kindzoku在发布问题之前发布了我已阅读的the article链接。我希望这也有助于理解Angular 1.5 +中的$onInit和require。

Plunker

由于受欢迎的需求，我做了一个plunker示例。

Answer 1

您应该在this.$onInit = function(){}

中使用必需的组件

这是一篇好文章https://toddmotto.com/on-init-require-object-syntax-angular-component/

你的案例中的$ onInit应该写成：

ctrl.$onInit = function () {
    ctrl.jCtrl.Get();
};

Answer 2

@iiminov有正确的答案。没有定义父HTML c-judgements。

Working plunker.

实现组件需要Angular 1.5组件中的属性

修改

Plunker

2 个答案: