AngularJS의 동일한 요소에 두 개의 지시어를 내포하는 방법은 무엇입니까?

AngularJS의 동일한 요소에 두 개의 지시어를 내포하는 방법은 무엇입니까?

2개의 디렉티브를 같은 요소에 중첩하려고 하면 다음 오류가 발생합니다.네스트된 "E" 명령어 - 새로운/분리된 범위를 요구하는 여러 명령어 [...]입니다.이 바이올린과 같이 두 개의 분리된 "E" 명령어를 네스트하고 싶습니다.(문제를 재현하려면 <lw> 명령어 코멘트를 해제해야 합니다.)

해결할 수 없는 오류/해결 방법을 알 수복 방법을 알 수 없는 상태로 계속 표시됩니다.

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

이거 먹히기로 한 거 아니었어?감사합니다!

remove replace: 이름 'lw'로 지시어에 true를 지정합니다.

그것도 해결이 될 겁니다.

updated fidle : 갱신된 fidle

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

분석:

무엇이 문제를 일으켰습니까?

lw 명령어로 replace=true를 지정하면 lw가 스코프를 격리하고, 이제 replace=true로 지정하면 스코프를 분리한 교체된 엘리먼트를 교환하려고 합니다.그러므로 자신도 모르게 동일한 엘리먼트에 대해2개의 스코프를 부여하려고 했습니다.

angular.timeout 버전 1.2.1의 코드 수준 관찰:

line 5728 : function applyDirectivesToNode는 디렉티브로 컴파일을 실행하는 함수입니다.여기서 5772행에서는 중복 스코프를 할당하려고 하는지, 즉 2개의 스코프를 가진 동일한 요소를 할당하려고 하는지 여부를 확인합니다.

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

위는 체크하는 함수입니다.같은 요소에 2개의 스코프를 할당하려고 하면 에러가 발생합니다.따라서 버그가 아니라 이렇게 설계되어 있습니다.

대체 이유: 진정한 제거는 문제를 해결합니다.

replace를 삭제함으로써: true what is replaceed new directive listie.lw 대신 새로운 directive listie가 추가되어 있기 때문에 하나의 분리된 스코프가 다른 스코프에 네스트 됩니다.이것은 절대적으로 올바르고 허용됩니다.네스트된 격리 스코프는 다음과 같습니다.

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

div로 감아도 되는 이유(이것이 회피책이라고 생각한 솔루션)

주의할 점은 div가 분리된 스코프를 가진 요소가 아니라는 것입니다.그것은 단지 요소일 뿐이다.교환 시 lw의 분리 스코프를 div에 부착합니다.(주의: div 자체에는 분리 스코프가 없습니다).따라서 동일한 요소 div에는 2개의 분리 스코프가 연결되어 있지 않습니다.따라서 중복이 없기 때문에 아사트 스텝이 통과하여 동작하기 시작합니다.

그래서 이것이 작동하도록 설계된 방법이고 확실히 버그는 아니다.

그냥 재미삼아 같은 실수를 했어요.새로운 디렉티브를 만들기 위해 오래된 "컷 앤 페이스트"를 했는데, 처음부터 같은 이름을 가지고 있었기 때문입니다.변경하는 것을 잊어버려서 이 오류가 발생하였습니다.

나만큼 나쁜 사람은 여기 체크할 수 있는 해결책이 있습니다.

래퍼 디렉티브의 템플릿 코드를 대체하여 수정했습니다.여기 업데이트 바이올린이 있습니다.이게 바뀐 거야.

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

이것으로 문제가 해결되었지만, 나에게는 버그로 보입니다.Github에 이슈를 만들어야겠다.

여기 - https://github.com/angular/angular.js/issues/5428

내 문제는 지시 JS 파일을 두 번 포함했기 때문이다.

어벤져스 예제를 사용하다가 각도 1.4로 업데이트한 후 이렇게 되었습니다.알고 보니 컨트롤러와 명령어가 같은 라인에서 경쟁하고 있었습니다.

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

그래서 컨트롤러를 다른 범위로 옮겨 고쳤습니다.

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

여기서 받아들여진 답변이 제 문제를 해결했습니다.

기본적으로 분리된 스코프를 디렉티브에서 제거하고 대신 디렉티브의 링크 함수를 통해 스코프 속성을 전달합니다(속성 파라미터 내).

이 경우 ng-repeat이 있는 요소에 bootstrap-ui accordion-group 디렉티브가 있습니다.

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

이렇게 해서 해결했습니다.

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

언급URL : https://stackoverflow.com/questions/20609770/how-to-nest-two-directives-on-the-same-element-in-angularjs