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

但我无法理解为什么我无法访问父控制器： console log of the child component members

由于某种原因，editModalCtrl为空（但它不应该是!!!）

如果有人可以帮助我，我真的很感激。欢呼声。

Answer 1

Controller实际上不是空的，你只是没有定义任何属性/方法。您正在使用controller: ['$scope', '$element', function ($scope, $element) { var self = this; self.someMember = true; self.someMethod = function() { } }。尝试添加一些成员并检查：

20140312

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

1 个答案: