클릭시 상위 요소 숨기기

Question

각도 요소 JS를 학습하면 요소를 클릭하면 상위 요소가 숨겨지는 간단한 기능을 사용해보십시오.

내 코드 : 내 <a> 태그를 클릭하면

<div class="form-section" ng-init="visible = true" ng-show="visible"> 
    <a class="next" ng-click="$parent.visible = false">NEXT</a> 
</div> 

그러나, 아무 일도 발생하지 않습니다.

나는이 바이올린에 내 코드를 기반으로 : 당신은 $parent

필요하지 않습니다 http://jsfiddle.net/oxda3aes/

Answer 1

을 당신이 visible라는 범위에서 변수를 생성하고 true로 설정되어 일을하고 있습니다. 변수를 변경하기 위해서해야 할 일은 visible $parent isn't referencing a parent node, it's referencing a parent scope입니다. 여기 http://jsfiddle.net/oxda3aes/26/

내가 컨트롤러에 보이는 변수를 선언 :

http://jsfiddle.net/oxda3aes/25/

이

<div class="form-section" ng-init="visible = true" ng-show="visible"> 
    <a class="next" ng-click="visible = false">NEXT</a> 
</div> 

당신이 조금 더 무슨 일이 일어나고 있는지 볼 도움이 될 수 있습니다. 둘 다 동일한 작업을 수행합니다. HTML 구조에서 부모 요소지만, 중첩 된 범위의 관계를 의미하지 않는다 각도에서 http://jsfiddle.net/oxda3aes/27/

Answer 2

$ 부모 :

그리고 여기 나는 같은 일을 클릭에 호출되는 범위에 대한 기능을 가지고있다. 위에서 언급 한 예제에서 ng-repeat는 각 iteration에 대해 하위 범위를 만들고이 하위 범위의 $ parent는 부모 범위를 가리 킵니다. 귀하의 경우 두 HTML 요소는 동일한 범위에 속하므로 이미 답변 된 것처럼 $ parent를 사용하지 마십시오.

부모 자녀 처리는, 당신의 NG-모델 객체를 사용하는 것이 항상 각도에서 상호 작용을 스코프보다는 프리미티브 ( ngModel = "obj.property"대신 ngModel = "속성"의) , 범위에 대한 매우 좋은 기사를 참조하십시오. https://github.com/angular/angular.js/wiki/Understanding-Scopes