2013-04-22 28 views
26

Tôi đang cố gắng xây dựng một chỉ thị mới trên đầu trang của một chỉ thị đã tồn tại nhưng tôi bị tạm dừng trong các lực lượng của mình. Khi tải trang Tôi đang phải đối mặt với các lỗi sau:Nhiều chỉ thị [chỉ thị # 1, chỉ thị # 2] yêu cầu phạm vi phân lập trên

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

Chỉ thị cơ sở trông như thế này:

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>' 
    }; 
}); 

Và chỉ wrapper của tôi trông như thế này:

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 của tôi trông giống như sau:

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

Lúc đầu tôi mặc dù thuộc tính tiêu đề của tôi là mâu thuẫn vì vậy tôi loại bỏ thuộc tính đó trong dòng html và từ chỉ thị trình bao bọc của tôi nhưng nó không hiệu quả.

+0

bạn có thể vui lòng thiết lập fiddle –

Trả lời

31

Bạn cần thay đổi mẫu easydialog và bọc <easymodal> trong một <div>.

+5

Cảm ơn, tôi đã không bao giờ đoán được điều đó. – Rohan

+2

Bạn có thể giải thích về điều đó không? Vấn đề ở nơi đầu tiên và làm thế nào là gói chúng trong một div sửa chữa nó? – masimplo

+5

@ mxa055 Tôi tin rằng Angular liên kết các phần tử HTML với một phạm vi và không thể kết hợp một phần tử HTML đơn lẻ với nhiều hơn 1 phạm vi. – Langdon

0

Vấn đề của bạn đơn giản là bạn đang thêm đối số template bên trong directive cũng như thêm thẻ mẫu phân giải có tên <easydialog> vào mẫu HTML thực tế của bạn. Bạn có thể chọn cái này hay cái kia.

Các vấn đề liên quan