AngularJS와 지침-지침 - 컨트롤러 서비스 상호 작용

제목은 입의 약간 있지만 현재의 내 상황이 : 나는에있는 모달 팝업에 대한 일반 마크 업하는 지시어 (D1)가AngularJS와 지침-지침 - 컨트롤러 서비스 상호 작용

은 뿌리. 컨트롤러의 범위 (C1)에있는 지시문 (D2)이 있습니다. D2가 모달 D1의 내용을 설정하고 싶습니다. 나는 S1에 궁극적으로 D1에 주입하고 싶은 네트워크로부터 데이터를 가져 오는 C1에 주입 된 서비스 (S1)를 가지고있다.

(모달에 대한 일반 마크 업)는 다음과 같이 D1은 다음과 같습니다 enter image description here

C1이 D1을 채울 D2에 데이터를 반환에서 S1 후 다음과 같이 D1이 될 것입니다. D2는 {{title}}과 같은 D1에서 모델 데이터를 정의 할 책임이 있습니다. enter image description here

아이디어는 다른 지시어 (D2)를 통해 정의/채워질 수있는 일반적인 감 결합 모달 (D1)을 갖는 것입니다.

이 기능을 구현하는 데 어려움을 겪고 있습니다. 보너스 포인트, 나는 체크 박스, 입력, 텍스트 같은 다른 요소로 모달을 채우기 위해 호출 할 수있는 API를 D1에 갖고 싶습니다. 이는 D1 외부의 마크 업을 작성한 다음 D1에 완전히 삽입하는 것과는 다릅니다.

코드 기본 사항은 다음과 같습니다

myApp.controller('C1', function(S1){ 
    var results = S1.query(); 
    // populate D1 attributes with results from S1? or a getter function in the controller to returns results to D1. 
} 

myApp.directive('D1', function() { 
var createCheckBox = function(name){ // one of many different element available exposed through D1's API. 
    var checkbox = document.createElement('input'); 
    checkbox.type = 'checkbox'; 
    checkbox.name = name; 
    return checkbox; 
} 
return{ 
    restrict: "E", 
    templateUrl: '/path/to/my/modal.html', 
    controller: function($scope){ // hopefully this would be D1's API 
     $scope.modalContent = []; 
     this.addCheckBox = function(checkboxName){ 
      $scope.push(this.createCheckBox(checkboxName)); 
     } 
    } 
    link: function(scope, element, attrs){ 
     // set up events on the modal (such as closing it) 
    } 
} 
} // end of D1 

myApp.directive('D2', function() { 
    return{ 
     restrict: "A", 
     require: 'D1', // <-- do not think this is possible with my setup. 
     link: function(scope, element, attrs){ 
      element.bind('click', function(){ 
       // loop through data returned by service 
       D1.addCheckBox(/* checkbox's name */); 
       // end loop 
      }); 

     } 
    } 
}// end of D2

HTML 마크 업

<div ng-controller="root"> 
    <div ng-controller="C1"> 
    <span D2></span> 
    </div> 
    <D1></D1> 
</div>

은 여기까지 다음과 같은 사항에 대해 감사합니다!

TL; DR :

출처

2013-02-28 shaselton

D1이 모든 렌더링을 담당하는 경우 D2가 지침이되어야합니까? 컨트롤러가 될 수 없습니까? –

나는 D1이 페이지 마크 업 외에 또는 그 외에 나타날 수있는 모달이라고 생각한다. 문제는 D2가 D1과 어떻게 통신 할 수 있을까요? – Jonnybojangles

다음은 비슷한 질문에 대한 답변입니다. http://stackoverflow.com/questions/14883476/angularjs-call-method-in-directive-controller-from-other-controller/14884646#14884646. – satchmorun

와우 긴 질문을 도울 수있는 또 다른 질문을 찾아! 잘 모르겠지만 Jonnybojandles의 의견을 따르기 만하면됩니다.

$broadcast 및 $on 주실 수 있습니까?

$rootScope.$broadcast('MyEvent'); // Fire an event 

$scope.$on('MyEvent', function() { }); // Handle the event

아니면 단순히 $rootScope을 사용 하시겠습니까?

출처

2013-04-04 14:25:33 Greg

AngularJS와 지침-지침 - 컨트롤러 서비스 상호 작용

답변

관련 문제