2

所以在过去的 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 是空的（但它不应该是！！！）

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

4

1 回答 1

1

控制器实际上不是空的，您只是没有在其上定义任何属性/方法。你正在与之合作$scope。尝试添加一些成员并检查：

controller: ['$scope', '$element', function ($scope, $element) {
    var self = this;
    self.someMember = true;
    self.someMethod = function() {
    }
}
于 2016-08-11T07:26:54.287 回答