从组件中要求指令控制器返回一个空控制器

Requiring directive's controller from component return an empty controller

本文关键字：一个 控制器 返回 组件 指令控制器      更新时间：2023-09-26

所以在过去的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"
        });
})();

但是我不明白为什么我不能访问父控制器:子组件成员的控制台日志

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

如果有人能在这方面帮助我，我将非常感激。欢呼。

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

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