지시어 통신에 대한 지시어 : 컨트롤러 비어 있음 (= {}) - AngularJS

Question

저는 angularJS를 처음 사용하기 때문에 재사용 가능한 코드를 작성하려고합니다. 물론, 설명서를 읽고 this tutorial을 보았습니다.

아이디어 : 이 지시문 D1 관리 할 D2 팝업 에게 지시를 인스턴스화 만 내가 D1 지침에 그녀의 오류를 보낼 D2 지시어를 원하는 내용입니다.

문제 : 지시문 D2에서 popupController는 비어 있습니다 (Object {}).

이 컨트롤러에 액세스하려고 시도 할 때를 제외하고는 모두 작동합니다. 그래서 내가 해당 부분에서만 코드를 자릅니다.

내 popupDirective :

app.directive('popup', function($compile){ 
    return { 
     restrict: 'E', 
     scope: { 
      show: '=', 
      title: "@popupTitle", 
      notifier: "@notifier" 
     }, 
     controller: 'popupController', 
     replace: false, 
     transclude: true, 
     link: function(scope, element, attrs) { 
      scope.dialogStyle = {}; 
      if (attrs.width) 
       scope.dialogStyle.width = attrs.width; 
      if (attrs.height) 
       scope.dialogStyle.height = attrs.height; 
      scope.hideModal = function() { 
       scope.show = false; 
      }; 
     }, 
     templateUrl: 'Popup.html' 
    }; 
}); 

그녀의 컨트롤러 :

app.controller('popupController', function($scope) { 
    $scope.errorMessage = ""; 
    $scope.modalShown = false; 
    $scope.toggleModal = function() { 
     $scope.modalShown = !$scope.modalShown; 
    }; 

    $scope.hideModal = function() { 
     $scope.show = false; 
    }; 

    $scope.hasNotifier = function() 
    { 
     return $scope.notifier; 
    }; 

    $scope.manageError = function(message) { 
     if ($scope.hasNotifier()) 
     { 
      $scope.resetContext(); 
      $scope.errorMessage = message; 
      $scope.errorDomElement.slideDown(200).delay(10000).slideUp(200); 
     } 
    }; 
}); 

contentDirective :

app.directive('contentDialog', function($compile) { 
    return { 
     restrict: 'E', 
     scope: {}, 
     // Search for the controller on the paren element 
     require: '^popup', 
     controller: 'ContentController', 
     replace: true, // Replace with the template below 
     link: function(scope, element, attrs, popupController) { 
      ...     
      scope.popupCtrl = popupController; 
      console.log(popupController); 
      popupController.manageError("salut"); 
      // HERE THE POPUPCONTROLLER IS EMPTY 
      ... 
    }; 
}); 

내용 컨트롤러 :

app.controller('ContentController', ['$scope', 'ContentRs', function($scope, UseCase) { 
    ... 
    $scope.updateContent = function() 
    { 
     if($scope.selectedContent.id !== -1) 
     { 
      var description = $scope.getSelectedContentDescription(); 
      ContentRs.update({ 
      id: $scope.selectedContent.id, 
      name: $scope.selectedContent.name, 
      description: description 
      }, function(){ 
       // on sucess 
       $scope.resetContext(); 
      }, function(){ 
       // on failure 
       $scope.popupCtrl.manageError("Update failed."); 
       // HERE THE POPUPCONTROLLER IS EMPTY 
      }); 
     } 
     else 
     { 
     console.log("Error"); 
     } 
    }; 
}]); 

홈페이지 HTML :

편집, 나는 HTML 잊어

<popup popup-title="Use case management" notifier="true" show='modalShown' 
            width='330px' height='450px'> 
    <content-dialog show='modalShown'></content-dialog> 
</popup> 

당신을 :) 감사를

Answer 1

문제는 popupController 안쪽에 당신은 단지 컨트롤러 $ 범위에 기능을 추가 할 수 있지만하지 않는 것이있다 그 자체. popupController에서 다음과 같이 변경하십시오.

this.manageError = $scope.manageError = function(message) { 
    if ($scope.hasNotifier()) 
    { 
     $scope.resetContext(); 
     $scope.errorMessage = message; 
     $scope.errorDomElement.slideDown(200).delay(10000).slideUp(200); 
    } 
};