angular.js 지시문은 transclude에서 이벤트를 swow합니다.

Question

ngTransclude를 사용하여 일부 내용 주위에 div 래퍼를 만드는 지시문을 만들었습니다. 당신이 HTML

은 "NG 숨기기"청취자가 작동

<div ng-controller="TodoCtrl"> 
    <form ng-submit="addTodo()"> 
    <input type="checkbox" ng-model="checked"> 
    </form> 
    <div ng-hide="checked">NOT CHECKED</div> 
</div> 

에서 그룹 요소를 제거하면 http://jsfiddle.net/DHzrr/1/

이 매우 간단한 예를 참조하십시오. 그래서 우리 그룹 지시문은 이벤트가 $ 범위를 방출하거나 분리하도록 삼킨다. 이 작품을 어떻게 만들 수 있습니까?

지시선 정의 개체에서 scope : true 특성을 사용할 때만 새 범위가 만들어 졌다고 생각했습니다.

Answer 1

transclude: true은 부모 (TodoCtrl) 범위에서 프로토 타입 적으로 상속되는 새 하위 범위를 만듭니다. 당신은 세 가지 방법 중 하나로 문제를 해결할 수 :

부모 범위에 정의 된 개체 속성에
1. (권장) 바인딩 : ng-model="obj.checked" 및 컨트롤러 : $scope.obj = {checked: false}
   fiddle
2. 사용 ng-model="$parent.checked"
3. 사용 부모의 모델을 업데이트하는 기능 : 당신의 input에 ng-change="toggle()"를 추가 한 다음 컨트롤러에서 함수를 정의 : $scope.toggle = function() { $scope.checked = !$scope.checked }

를 참조하십시오 lso What are the nuances of scope prototypal/prototypical inheritance in AngularJS?, 섹션 항목 "4. transclude: true "