Làm thế nào để lồng hai chỉ thị trên cùng một phần tử trong AngularJS?

Question

Khi tôi cố lồng hai chỉ thị trên cùng một phần tử, tôi nhận được lỗi sau. Chỉ thị "E" lồng nhau - Nhiều chỉ thị [...] yêu cầu phạm vi mới/bị cô lập, Tôi muốn lồng hai chỉ thị có phạm vi tách biệt "E", như trong this fiddle. (Để thực sự tạo lại vấn đề, bạn cần phải bỏ ghi chú <lw> chỉ thị)

tôi tiếp tục nhận được lỗi này mà tôi không hiểu/biết làm thế nào để sửa chữa:

Error: [$compile:multidir] Multiple directives [lw, listie] asking for new/isolated scope on: <listie items="items items"> 

Chẳng phải này phải làm việc? Cảm ơn!

Answer 1

loại bỏ thay thế: true trên thị theo tên 'lw' ..

Đó cũng nên giải quyết.

cập nhật fiddle: updated fiddle

app.directive('lw', function(){ 
    return { 
     restrict: 'E', 
     scope: { 
      items: "=" 
     }, 
     template: '<listie items="items"></listie>', 
     controller: function($scope) { 
     } 
    } 
}); 

Phân tích:

những gì gây ra vấn đề?

với thay thế = true cho chỉ thị lw điều gì xảy ra là lw đã cô lập phạm vi, bây giờ là thay thế = true, phần tử được thay thế mà chính nó có phạm vi cách ly đã được thay thế ở đó, vì vậy những gì bạn vô tình làm là bạn đã thử để cung cấp cho hai phạm vi cho cùng một phần tử listie.

mã cấp quan sát trong angular.js phiên bản 1.2.1:

dòng 5728: chức năng applyDirectivesToNode là hàm để thực thi biên dịch trên thị và đây trong dòng 5772 họ làm việc kiểm tra này nếu chúng ta đang cố gắng để gán trùng lặp phạm vi hoặc nói cách khác cùng một yếu tố với hai phạm vi.

function assertNoDuplicate(what, previousDirective, directive, element) { 
     if (previousDirective) { 
     throw $compileMinErr('multidir', 'Multiple directives [{0}, {1}] asking for {2} on: {3}', 
      previousDirective.name, directive.name, what, startingTag(element)); 
     } 
    } 

ở trên là chức năng kiểm tra và nếu trong trường hợp có cố gắng chỉ định hai phạm vi cho cùng một yếu tố thì lỗi đó sẽ bị lỗi. Vì vậy, đây là cách nó được thiết kế để được và không phải là một lỗi.

lý do thay thế: xóa thực sự giải quyết được sự cố?

bằng cách loại bỏ thay thế phạm vi isolate lồng nhau cũng giống như

<lw items="items" class="ng-isolate-scope"> 
    <div items="items" class="ng-isolate-scope"> 
     .......... 
    </div> 
</lw> 

tại sao gói trong một div cũng sẽ làm việc (đây là giải pháp của bạn mà bạn coi là workaround)?

Điểm cần lưu ý là div không phải là phần tử có phạm vi cách ly riêng biệt. Nó chỉ là một phần tử. ở đây trên thay thế bạn đang gắn phạm vi cô lập của lw được gắn vào một div. (LƯU Ý: Bản thân div không có phạm vi cách ly), vì vậy không có 2 phạm vi cách ly gắn vào cùng một phần tử div. do đó không có trùng lặp nên bước khẳng định đã trôi qua và nó bắt đầu hoạt động.

Vì vậy, đây là cách nó được thiết kế để làm việc và chắc chắn nó không phải là một lỗi.

Answer 2

Tôi đã cố khắc phục bằng cách thay thế mã mẫu trong chỉ thị trình bao bọc. Đây là update fiddle. Đây là những gì đã thay đổi.

template: '<div><listie items="items"></listie></div>', 
//template: '<listie items="items"></listie>', bug? 

Điều này giải quyết được vấn đề của tôi, nhưng có vẻ như lỗi của tôi. Tôi đoán tôi sẽ tạo ra một vấn đề trên Github.

Có - https://github.com/angular/angular.js/issues/5428

Answer 3

Chỉ vì lợi ích, tôi đã gặp lỗi tương tự. Hóa ra là vì tôi đã thực hiện "Cắt và Dán" cũ để tạo ra một chỉ thị mới và họ có cùng tên để bắt đầu. Tôi quên thay đổi nó đã tạo ra lỗi này.

Vì vậy, đối với bất kỳ ai xấu như tôi thì đây là giải pháp khả thi để kiểm tra.

Answer 4

Phản hồi được chấp nhận here giải quyết được sự cố cho tôi.

Về cơ bản xóa phạm vi bị cô lập khỏi chỉ thị và thay vào đó chuyển thuộc tính phạm vi thông qua hàm liên kết của chỉ thị (trong tham số thuộc tính).

Answer 5

Vấn đề của tôi là vì tôi đã được bao gồm các tập tin JS chỉ hai lần

Answer 6

Tôi đã sử dụng Avengers dụ và sau khi cập nhật lên góc 1,4 tôi bắt đầu nhận được này. Khi nó bật ra, nó có một bộ điều khiển và một chỉ thị chiến đấu cho phạm vi trên cùng một dòng

<div my-directive ng-controller="myController as vm"></div> 

Vì vậy, hãy di chuyển bộ điều khiển đến một phạm vi riêng biệt để sửa chữa nó.

<div my-directive > 
<div ng-controller="myController as vm"> 
</div> 
</div> 

Answer 7

Trong trường hợp của tôi, tôi đã có một chỉ thị accordion nhóm bootstrap-ui trên một yếu tố mà có ng-repeat:

<accordion-group is-open="status.open" ng-repeat="receipt in receipts"> 

Và giải quyết nó bằng cách làm này:

<div ng-repeat="receipt in receipts"> 
    <accordion-group is-open="status.open">