2013-04-02 3 views
20

기본 div 위로 마우스를 가져 가면 기본 div의 일부 하위 div가 기본적으로 숨겨 지도록하고 싶습니다.각도 : 호버의 범위 업데이트

저는 그 각도에서 네이티브를 가지고 있고, jquery에서 .hover() 방법을 잊고 있습니다.

나는 자식 div에서 ng-show을 사용하고 나서 주 div를 가리키면 바인딩을 업데이트합니다. 호버링을 듣기위한 지침이 있습니까?

+0

호버링 (예 : ng-hover)에 대한 지침은 없지만 하나를 작성할 수 있습니다! AngularJS의 아름다움입니다. =) – Swordfish0321

답변

51

당신은 올바른 길을 가고 있습니다. 실제로 ngMouseenter 및 ngMouseleave 지시문을 사용하여이를 수행 할 수 있습니다.

<span ng-mouseenter="show = true" ng-mouseleave="show = false"> 
    Mouse over me. 
</span> 

<div ng-show="show">Hello!</div> 

는 다음 작업 Plunker입니다 : Swordfish0321 @http://plnkr.co/edit/Ro80nR7HT7OGGPCXjz7E?p=preview

도 권리입니다 - 당신은 당신이 원하는 경우 호버링을 위해 특별히 듣고 매우 간단한 지시를 쓸 수 있지만, 필요하지 않을 수도있다. 예를 들어 UI Bootstrap의 툴팁에는 mouseentermouseleave이 사용됩니다.

+0

감사합니다! 그게 내가 찾고 있던거야 –

+0

@ Josh David Miller. 내가 그 위에 있으면 "Hello"도 표시하고 싶습니다. 그리고 내부 div로 넣을 수는 없습니다. 이것에 대한 도움이 필요하십니까? – user100693

4

매우 간결한 대답은 @JoshDavidMiller에게 감사드립니다. 나는 이것을 반복 할 필요가 있었고 우아한 방법을 찾아 내지 못했습니다. 범위에서 부울을 사용하는 것은 내가 가리키고있는 것 대신리스트의 모든 요소에 대한 편집 컨트롤을 보여주는 것이 었습니다. angular.element (예 : JQuery)을 호핑하고 호버 핸들러를 직접 연결하여 선회 한 요소에 대한 컨트롤 만 수동으로 표시 할 수있게되었습니다. 나는 그런 악한 방법으로 몸을 굽히지 않았기 때문에 기쁘다.

<div ng-repeat="item in items" ng-mouseenter="item.showEdit = true" ng-mouseleave="item.showEdit = false"> 
    <span class="glyphicon glyphicon-edit" ng-show="item.showEdit"></span> 
    Mouse over me. 
</div> 

는 단순히 item보다는 $scope에 속성을 연결합니다. 몇 가지 상황에서 무작위 키를 내 목록의 항목에 추가 할 수 없어 배열에 새로운 배열을 매핑 했으므로 item은 실제로 래퍼 객체의 속성이고 래퍼 객체에 원하는 속성을 첨부 할 수 있습니다. item 키를 오염시키지 않습니다.

+2

$ parent 범위를 명시 적으로 참조하여 해결 한 비슷한 문제가있었습니다. 그 전에 개체를 직접 업데이트하려고 시도했을 때 더 낮은 범위에 같은 이름의 새 필드가 만들어졌습니다. – downhand

+0

@downhand 오른쪽 범위 상속 때문입니다. 상속 된 속성은 읽을 수 있지만 속성을 설정하면 기본 프로토 타입 속성이 덮어 쓰기보다는 숨겨집니다. Angular보다 JavaScript 제한이 더 많습니다 :) – Chev