要求組件的控制器返回一個空控制器

Question

所以我一直試圖弄清楚過去4個小時。基本上，我有被動態編譯成DOM 父指令，並在其中我有被transcluded

$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

控制器實際上不是空的，你只是沒有定義它的任何屬性/方法。您正在使用$scope來代替。嘗試添加一些成員，並檢查：

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