각도 JS 중첩 사용자 정의 지시

Question

나는 각도 JS에서 사용자 정의 지시어와 중첩 같은 것을 사용하고 싶습니다. 아무도 간단한 해결책으로 설명 할 수 있습니까? 나를 위해

예제 코드는 다음과 같습니다 작동하지 않습니다 :

<outer> 
    <inner></inner> 
</outer> 

JS 간단한 솔루션을 원하는 경우

var app = angular.module('app',[]); 
app.directive('outer',function(){ 
    return{ 
     restrict:'E', 
     template:'<div><h1>i am a outer</h1></div>', 
     compile : function(elem,attr){ 
      return function(scope,elem,att,outercontrol){ 
       outercontrol.addItem(1); 
      } 
     }, 
     controller : function($scope){ 
      this.addItem = function(val){ 
       console.log(val); 
      } 
     } 
    } 
}); 

app.directive('inner',function(){ 
    return{ 
     require : 'outer', 
     template : '<div><h1>i am a inner</h1></div>', 
     link:function(scope,elem,attr){ 

     } 
    } 
}); 

Answer 1

, 체크 아웃 this plunkr.

var app = angular.module('app',[]); 
 

 
app.directive('outer', function() { 
 
    return { 
 
     restrict: 'E', 
 
     template: '<div style="border-style:solid"><h1>hey</h1><inner></inner></div>', 
 
    } 
 
}); 
 

 
app.directive('inner', function() { 
 
    return { 
 
     restrict: 'E', 
 
     template: '<div style="border-style:solid"><h1>i am an inner</h1></div>', 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script> 
 
<div ng-app="app"> 
 
    <outer></outer> 
 
</div>

문제는 지시어의 템플릿 속성으로 태그를 누크하는 것입니다. 이 줄은

template:'<div><h1>i am a outer</h1></div>', 

입니다.

Answer 2

우선 요소로 액세스 할 수 있도록 내부에 제어부를 추가 restrict:'E'.

그런 다음 부모에서이 지시자를 찾아 보면 수 있도록 require : '^outer',에 require : 'outer'을 변경합니다.

그런 다음 다음 단계로, 조회 할 <outer>의 내용을 가능하게 transclude를 사용해야합니다 :

1. 는 외부 지시에 transclude = true를 추가합니다.
2. 내부 데이터를 표시 할 위치를 정의하십시오. 는 (난 당신이 template:'<div><h1>i am a outer</h1><div ng-transclude></div></div>'처럼되고 외부 하나의 템플릿을 수정할 수는 "내가 외부이다"문자열 뒤에 표시해야 할 것 같아요).

그런 다음 당신은 전혀 컴파일 매개 변수가 필요하지 않습니다. outercontrol을 호출 한이 변수가 외부 지시어에서 호출되지 않고 내부 지시문에서 호출되지 않으므로 외부 지시문에 대해 컴파일 할 필요가 전혀 없으며 내부 링크 함수가 다음과 같이 수정됩니다.

link: function(scope, elem, attr, outercontrol){ 
    outercontrol.addItem(1); 
} 

모든 수정 후 최종 코드는 다음과 같이 될 것입니다 :

HTML :

<outer> 
<inner></inner> 
</outer> 

JS :

var app = angular.module("exampleApp",[]); 
    app.directive('outer', function(){ 
     return{ 
      transclude:true, 
      restrict:'E', 
      template:'<div><h1>i am a outer</h1><div ng-transclude></div></div>', 
      controller : function($scope){ 
       this.addItem = function(val){ 
        console.log(val); 
       } 
      } 
     } 
    }); 

    app.directive('inner',function(){ 
     return{ 
      restrict:'E', 
      require : '^outer', 
      template : '<div><h1>i am a inner</h1></div>', 
      link:function(scope,elem,attr,outercontrol){ 
       outercontrol.addItem(1); 
      } 
     } 
    });