템플릿을 요구하는 여러 디렉티브:

템플릿을 요구하는 여러 디렉티브:

다음 HTML을 사용하고 있습니다.

<div style="border:1px solid; height:300px; width:500px; position:relative;  left:100px" id="canvas">
  <tbox ng-repeat="tb in textBoxes" ng-model="tb">
  </tbox>
</div>

그리고 다음 두 가지 지시사항은

appModule.directive('resizable', function($compile, $document) {
  return {
    restrict: "A",
    template: '<div ng-style="{top:tb.x, left:tb.y, height:tb.height, width:tb.width}"  ng-transclude><span class="scale">s</span></div>',
    transclude: true,
    replace: true,
    require: 'ngModel'
  }
});

appModule.directive('tbox', function($document) {
  return {
    restrict: "E",
    template: '<div class="editbox" resizable editoptions>{{tb.text}}</div>',
    replace: true
  }
});

각도가 나를 던지고 있는 다음 오류는 정확히 무엇을 의미합니까?

Error: Multiple directives [tbox, resizable] asking for template on: <div class="editbox" resizable="" editoptions="" ng-repeat="tb in textBoxes" ng-model="tb">

http://jsfiddle.net/sEZM3/에서 jsfiddle을 참조하십시오.

이렇게 하다, .replace: true행을 지정합니다.

같은 디렉티브코드를 여러 번 로드하려고 하면 같은 에러가 발생할 수 있습니다.특히 모든 Angular 항목(명령어 등)을 별도의 파일에 보관하고 모든 항목을 별도의 줄에 포함할 때 발생할 수 있습니다.그건 내 경우였어.

이 문제는 (워치 작업 중) 클리닝 없이 grunt building으로 인해 dist 디렉토리에 존재하는 디렉티브와 템플릿의 여러 복사본이 원인입니다.깔끔하고 재건한 덕분에 이 문제를 해결할 수 있었습니다.

저는 같은 디렉티브를 index.html에 두 번 포함시켰습니다.

같은 이름의 컴포넌트가 2개 있을 때 발생(복사 붙여넣기 오류):

내 커피스크립트는, 하지만 순수한 각도에서 일어나기 쉽다:

component1.coffee
    appModule.component('name', {
    templateUrl: '/public/partials/html1.html',
  controller: 'controler1',
  bindings: {
    somebindings: '<'
  }
});


component2.coffee
    appModule.component('name', {
    templateUrl: '/public/partials/html2.html',
  controller: 'controler2',
  bindings: {
    somebindings: '<'
  }
});

결론: "이름"은 전체 앱에서 고유해야 합니다.

TypeScript를 사용하는 Visual Studio 사용자의 경우 이 점이 마음에 듭니다.타이프스크립트 파일의 이름을 변경했습니다.빌드된 .js 파일은 디렉토리에 있습니다(프로젝트에는 표시되지 않습니다).사용되지 않는 *.js 파일을 제거하기 위해 디렉토리의 모든 파일을 표시해야 했습니다.

크기 조정 가능한 지시문이 잘못되었습니다.그ng-transclude디렉티브는 가장 안쪽 요소에 적용되어야 합니다.그 내용은 폐기되고 변환된 콘텐츠로 대체되기 때문입니다.

크기 조정 가능한 요소 지시문으로 tbox 지시문 템플릿을 둘러싸야 합니다.edit options Atribute가 어떤 역할을 하는지 모르지만 지시문이라면 템플릿도 사용할 수 없습니다.

내 말은 이런 거야.

appModule.directive('resizable', function($compile, $document) {
    return {
        restrict: "E",
        template: '<div ng-style="{top:tb.x, left:tb.y, height:tb.height, width:tb.width}"  ng-transclude></div>',
        transclude: true,
        replace: true,
        //...

appModule.directive('tbox', function($document) {
    return {
        restrict: "E",
        template: '<resizable><div class="editbox" editoptions>{{tb.text}}</div></resizable>',
        replace: true,
        //...

결과:

<div ng-style="{top:tb.x, left:tb.y, height:tb.height, width:tb.width}"  ng-transclude>
    <div class="editbox" editoptions>{{tb.text}}</div>
</div>

제 경우 Bundle Config에서 누락된 파일에 대한 참조가 있었습니다.이 참조를 삭제했더니 동작하기 시작했습니다.

나는 내 코드에 중복이 없었다.이 문제는 모듈을 복제하여 새로운 모듈로 리스타트를 하고 모듈 전체를 검색/교체하여 파일 이름을 변경한 결과 발생합니다.

중복이 없어져 브라우저 동기 기반 서버를 정지 및 기동했는데도 오류가 계속 발생하였습니다.

빌드 시스템이 개발 환경용으로 작성한 .tmp 디렉토리를 삭제하여 이 문제를 해결했습니다.

언뜻 보면제가 사용하고 있는 JS 제너레이터는 빌드 시스템을 생성하여 다음과 같은 경우에 .tmp 디렉토리를 더티 상태로 둡니다.몇 번 들켰어요.

하나의 (요소) 지시문이 다른 (요소) 지시문을 직접 참조하도록 할 수 없습니다.로 감싼다<div>예:

template: '<div><my-custom-directive>'
        + '</my-custom-directive></div>'

상세한 것에 대하여는, https://github.com/angular/angular.js/issues/5428 를 참조해 주세요.

둘 다 보관하는 것과 같은 단순한 실수일 수도 있습니다.template그리고.templateUrl동일한 지시어로 속성을 지정합니다.

(다른 사람에게 도움이 되는 경우)

백업 파일(즉, .bkp.html)이 있는 것이 문제였습니다.이것은 참조용으로 사용하고 있던 템플릿의 오래된 카피입니다.그러나, 이것은 「.../**/*.html」패턴과 일치하기 때문에, 카르마에 포함되어 있었습니다.

동일한 디렉티브를 여러 번 Import하면 이 문제가 발생할 수 있습니다.

언급URL : https://stackoverflow.com/questions/19801467/multiple-directives-asking-for-templates-on