다른 지시어를 사용하는 지시문 - AngularJS

Question

나는 두 개의 지시문을 가지고 있는데, 나는 아버지 파일에서 얼마나 많은 아들을 계수하고 JS 파일 다음에 표시된 것처럼 index.html에 카운터를 표시하고 싶다. 문제는 내가 정확하게 숫자를 얻지 못했다는 것이다.

module.directive('directiveFather', function() { 

    return { 

    restrict: 'E', 
    scope: {}, 
    controller: function ($scope) { 

     $scope.AllCounter = 0; 

     this.addCounter = function() { 

      $scope.AllCounter = $scope.AllCounter + 1; 

     } 

    } 


} 

})

module.directive('directiveSon', function() { 

return { 

    restrict: 'E', 
    scope: {}, 
    require: '^directiveFather', 
    link: function(scope, element, attrs, fatherCtrl){ 
     fatherCtrl.addCounter(); 
    } 
    } 


} 

})

<directive father> 

<directive son> 

</directive son> 
{{AllCounter}} 

</directive father> 

Answer 1

당신은 분리 범위 안에 0 다음 요소를 사용하면은 상위 범위에 바인딩됩니다 (따라서 AllCounter은 올바른 값을 보유하지만보기에서 직접 사용할 수 없습니다).

---

당신은 directiveFather에서 scope: true/false (demo 1 참조) 또는
에 scope: {}을 변경할 수 있습니다 "수동"컴파일, 링크 (demo 2 참조) directiveFather 요소에 HTML을 추가합니다.
은 (또한, 트랜스 클루 전 및 template를 사용 Wildhoney's suggestion 있습니다.)

_{기본적으로, 당신이 작동하는 방식에 대한 그 어떤 것도 필요하지 않습니다 - 표시하여 (그들이 그 모든 작품 입증 할 경우에만 필요하다 보기의 카운터) 카운터를 추가하지 않아도 addChild() 함수가 예상대로 호출됩니다. 예상대로 상기}

---

는 요소 이름 (<directive-father> 및 <directive-son>)를 고정 후에는 작동한다.

---

참조, 또한이 짧은 데모 : demo 1, demo 2.