2013-04-22 8 views
26

이미 존재하는 지시문 위에 새로운 지시문을 만들려고 시도 중이지만 처리 과정에서 멈추었습니다.복수 지시어 [지시어 # 1, 지시문 # 2]에서 분리 된 범위를 묻습니다.

Multiple directives [directive#1, directive#2] asking for isolated scope on <easymodal title="Test-Title" text="Text-Text" oncancel="show = false" onok="alert();">

기본 지침은 다음과 같습니다 : 페이지를로드 할 때 나는 다음과 같은 오류에 직면하고있어

Rohan.directive('easymodal', function() { 
    return { 
     restrict: 'E', 
//  priority: 200, 
     transclude: true, 
     replace: true, 
     scope:{ 
      showModal: "=show", 
      callback: "=closeFunction", 
      dismissable: '&' 
     }, 
     template: 
      '<div data-ng-show="showModal" class="modal-container">' + 
       '<div class="modal-body">' + 
        '<div class="title"><span data-translate></span><a data-ng-show="dismissable" data-ng-click="dismiss()">x</a></div>' + 
        '<div data-ng-transclude></div>' + 
       '</div>' + 
       '<div class="modal-backdrop" data-ng-click="dismiss()"></div>' + 
      '</div>' 
    }; 
}); 

그리고 내 래퍼 지침은 다음과 같습니다

Rohan.directive('easydialog', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     scope: {title: '@', 
      text: '@', 
      onOk: '&', 
      onCancel: '&'}, 
     replace: true, 
     template: 
      '<easymodal>' + 
       '{{text}} ' + 
       '<hr>' + 
       '<button ng-click="{{onCancel}}" value="Cancel"' + 
       '<button ng-click="{{onOk}}" value="Ok"' + 
      '</easymodal>' 
    }; 
}); 

내 HTML 다음과 같이 표시됩니다.

<easydialog title="Test-Title" text="Text-Text" onCancel="show = false" onOk="alert();" /> 

처음에는 내 제목 속성이 충돌하기 때문에 html 줄과 래퍼 지시문에서 해당 속성을 제거했지만 효과적이지 못했습니다.

+0

당신은 바이얼을 설정하시기 바랍니다 –

답변

31

easydialog 템플릿을 변경하고 <easymodal><div>에 넣어야합니다.

+5

고마워요, 나는 결코 짐작하지 않았을 것입니다. – Rohan

+2

그것에 대해 자세히 설명해 주시겠습니까? 첫 번째 문제는 무엇이며 어떻게 div에 배치하면 문제를 해결할 수 있습니까? – masimplo

+5

@ mxa055 Angular는 HTML 요소를 범위에 연결하고 단일 HTML 요소를 두 개 이상의 범위에 연결할 수 없다고 생각합니다. – Langdon

0

귀하의 문제는 directive 안에 template 인수를 추가하고 실제 HTML 템플릿에 <easydialog>이라는 해결 템플릿 태그를 추가하는 것입니다. 당신은 둘 중 하나를 선택할 수 있습니다.

관련 문제