javascript - 要求组件的指令 Controller 返回一个空 Controller

Question

所以在过去的 4 个小时里，我一直在努力解决这个问题。基本上我有一个父指令，它被动态编译成 DOM在其中我有一个正在被嵌入的组件

$compile('<edit-modal entry="entry" positions="positions" day="day" is-filled="isFilled" week-start-date="weekStartDate" available-tags="availableTags" minigrids="minigrids">' +
        '<ns-gap-requests gap="entry" minigrids="minigrids"></ns-gap-requests></edit-modal>')(scope);

以下是在 editModal html 中呈现的组件:

 <div id="gapRequestsBody" ng-if="onGapRequest" ng-transclude></div>

以下是我的父指令

 return {
        restrict: 'E',
        replace: 'true',
        transclude:"true",
        templateUrl: 'Scripts/NewScheduler/Templates/Modals/editModal.html',

        scope: {
            positions: '<',
            entry: '=',
            day: '<',
            weekStartDate: '<',
            availableTags: '<',
            minigrids: '<'
        },

        controller: ['$scope', '$element', function ($scope, $element) {
            $scope.$parent.child = $scope;

            $scope.onGapRequest = false;
            $scope.changeToOnGapRequestPage = function() {
                $scope.onGapRequest = true;
            }

.....

以下是我的子组件:

(function() {
    'use strict';

    angular.module('newScheduler').component('nsGapRequests',
        {
            require:{editModalCtrl : "^editModal"},
            bindings: {
                gap: "=",
                minigrids:"<"
            },
            templateUrl: "Scripts/NewScheduler/Templates/Modals/nsGapRequestsModal.html",
            controller: [function () {
                var self = this;

                self.$onInit = function() {
                    console.log(self);
                }

                console.log(self.gap);
                console.log(self.minigrids);

                if (!self.assignToOption) {
                    self.assignToOption = { chosenRequester: null };
                }

                self.requesters = self.minigrids.map(function (minigrid) {
                    return minigrid.gridRows;
                }).reduce(function(a, b) {
                    return a.concat(b);
                })
                    .map(function (gridRows) {
                    return gridRows.user;
                    })
                .filter(function (value, index, array) {
                    return array.indexOf(value) === index;
                })
                .filter(function(user) {
                    return self.gap.requests.indexOf(user.id) !== -1;
                    });

            }],
            controllerAs: "gapRequests"
        });
})(); 

但是我不明白为什么我不能访问父 Controller : console log of the child component members

并且出于某种原因 editModalCtrl 是空的(但它不应该是!!!)

如果有人可以帮助我，我将不胜感激。干杯。

Answer 1

Controller 实际上不是空的，你只是没有在它上面定义任何属性/方法。您正在使用 $scope 代替。尝试添加一些成员并检查:

controller: ['$scope', '$element', function ($scope, $element) {
    var self = this;
    self.someMember = true;
    self.someMethod = function() {
    }
}