AngularJS ng-click, ng-show 및 ng-hide 지시문

작성자 : 제임스 하트만 제임스 하트만
Hours 업데이트

⚡ 스마트 요약

AngularJS 이벤트는 웹 애플리케이션이 마우스 클릭, 키 입력, 호버 동작과 같은 사용자 입력에 반응할 수 있도록 합니다. `ng-click`, `ng-show`, `ng-hide`와 같은 디렉티브는 수동 DOM 리스너를 사용하는 대신 마크업에서 해당 동작을 선언적으로 바인딩합니다.

  • 🖱️ 클릭 처리: `ng-click`은 표현식이나 컨트롤러 함수를 요소, 주로 버튼에 연결합니다.
  • 👁️ 조건부 표시: `ng-show`는 해당 표현식이 참일 때 요소를 렌더링하고, `ng-hide`는 해당 표현식이 참일 때 요소를 제거합니다.
  • 🎨 메커니즘 : 두 지시문 모두 내장된 ng-hide CSS 클래스를 토글하여 display 속성을 none으로 설정하므로 요소가 DOM에 유지됩니다.
  • 🔗 범위 바인딩: $scope에 배치된 멤버 변수는 가시성을 제어하며, 핸들러 내부에서 해당 변수를 변경하면 뷰가 즉시 업데이트됩니다.
  • 📋 지시 범위: 18개의 리스너 지시문은 흐림, 변경, 초점, 키보드, 마우스, 붙여넣기 및 제출 이벤트를 다룹니다.
  • ⚠️ 지원 상태: AngularJS는 2021년 12월 31일에 지원이 종료되었으므로, 새로운 프로젝트는 최신 Angular를 대상으로 해야 합니다.
자세히 보기

AngularJS ng-클릭 ng-show ng-hide 지시어

AngularJS 이벤트

AngularJS 이벤트 이벤트는 웹 애플리케이션이 마우스 클릭, 키보드 입력, 마우스 오버와 같은 사용자 입력과 상호 작용할 수 있도록 하는 기능입니다. 웹 애플리케이션에서는 특정 작업과 동작을 수행하기 위해 이벤트를 처리해야 하며, 각 이벤트는 사용자가 해당 동작을 수행할 때 발생합니다.

웹 애플리케이션을 개발하다 보면 결국 마우스 클릭 및 이동, 키보드 입력, 변경 이벤트와 같은 DOM 이벤트를 처리해야 할 필요성이 생깁니다. AngularJS와 이러한 이벤트를 선언적으로 처리하는 지침을 제공합니다.

예를 들어 페이지의 버튼을 클릭했을 때 어떤 동작을 수행해야 한다면, `ng-click` 이벤트 디렉티브가 해당 기능을 제공합니다.

⚠️ 지원 관련 공지: AngularJS가 도달했습니다 2021년 12월 31일부로 생산 종료 Angular 팀으로부터 더 이상 패치나 보안 수정 사항을 제공받지 않습니다. 아래 지침은 기존 AngularJS 1.x 애플리케이션 유지 관리에 유효하며, 새로운 작업에는 최신 버전을 사용하십시오. 모난여기서 이러한 지시문은 다음과 같은 이벤트 바인딩으로 대체됩니다. (click) 과 별 *ngIf.

AngularJS의 ng-click 지시문이란 무엇입니까?

The "ng-클릭 지시어" AngularJS의 `click` 속성은 HTML 요소를 클릭했을 때 사용자 지정 동작을 적용합니다. 일반적으로 버튼에 사용되는데, 버튼이 클릭 반응을 연결하는 가장 흔한 위치이기 때문입니다. 또한 클릭 시 경고 메시지를 표시하는 데에도 사용됩니다.

AngularJS의 ng-click 구문

<element
 ng-click="expression">
</element>

AngularJS의 ng-click 예

이 ng-click 예제에서는 사용자가 버튼을 클릭할 때마다 카운터 변수가 증가합니다.

AngularJS의 ng-click 지시어

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body ng-app="">

<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<h1>Guru99 Global Event</h1>

<button ng-click="count = count + 1" ng-init="count=0">
    Increment
</button>

<div>The Current Count is {{count}}</div>

</body>
</html>

Code 설명 :

  1. ng-init 지시문은 로컬 변수를 설정합니다. count 0합니다.
  2. 버튼의 ng-click 디렉티브가 증가합니다. count 클릭할 때마다 1씩 증가합니다.
  3. 보간법 {{count}} 현재 값을 사용자에게 표시합니다.

출력:

AngularJS에서 ng-클릭

'증가' 버튼이 표시되고 초기값은 0입니다. 아래 이미지와 같이 버튼을 클릭하면 값이 증가합니다.

AngularJS에서 ng-클릭

AngularJS의 ng-show 지시문이란 무엇입니까?

The ng-show 지시문 주어진 항목을 표시하거나 숨깁니다. HTML ng-show 속성에 제공된 표현식을 기반으로 요소가 표시됩니다. 내부적으로 해당 요소는 ng-show 속성을 제거하거나 추가하여 표시되거나 숨겨집니다. .ng-hide CSS 클래스는 미리 정의된 클래스로, 속성을 설정합니다. display 에 none.

AngularJS의 ng-show 구문

<element
 ng-show="expression">
</element>

AngularJS의 ng-show 예

이 예제는 `ng-show`를 사용하여 숨겨진 요소를 표시합니다.

AngularJS의 ng-show 지시문

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<h1>Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    <input type="button" value="Show Angular" ng-click="ShowHide()"/>

    <br><br><div ng-show="IsVisible">Angular</div>
</div>

<script type="text/javascript">

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

    app.controller('DemoController', function($scope) {
        $scope.IsVisible = false;

        $scope.ShowHide = function() {
            $scope.IsVisible = true;
        };
    });
</script>

</body>
</html>

Code 설명 :

  1. 버튼의 `ng-click` 디렉티브는 다음을 참조합니다. ShowHide 컨트롤러에 정의된 함수 DemoController.
  2. `ng-show` 속성은 "Angular"라는 텍스트를 포함하는 `div` 요소에 붙어 있습니다. 이 요소가 바로 표시 여부를 제어하는 ​​요소입니다.
  3. 컨트롤러에서, IsVisible 멤버 변수는 스코프 객체에 배치되고 초기화됩니다. false따라서 페이지가 처음 로드될 때 해당 div가 숨겨집니다. ng-show를 사용하면 값이 다음과 같습니다. 참된 요소를 표시합니다. 그릇된 그것을 숨긴다.
  4. The ShowHide 함수 집합 IsVisible div가 보이도록 true로 설정합니다.

출력:

AngularJS의 ng-show 지시문

텍스트를 담고 있는 div 요소가 처음에는 표시되지 않는 이유는 다음과 같습니다. IsVisible false로 시작합니다. 클릭 각도를 표시하세요 해당 값을 true로 설정하면 텍스트가 표시됩니다.

AngularJS의 ng-show 지시문

관련 기사

AngularJS의 ng-hide 지시문이란 무엇입니까?

The ng-hide 지시어 `ng-show`는 표현식이 TRUE로 평가되면 요소를 숨기고, FALSE로 평가되면 요소를 표시합니다. 이는 `ng-show`의 정반대 기능입니다. 내부적으로는 동일한 방식을 사용합니다. .ng-hide CSS 클래스.

AngularJS의 ng-hide 구문

<element
 ng-hide="expression">
</element>

AngularJS의 ng-hide 예

이 예제는 ng-show 예제와 동일하므로 두 지시문을 직접 비교할 수 있습니다.

AngularJS의 ng-hide 지시문

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<h1>Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    <input type="button" value="Hide Angular" ng-click="ShowHide()"/>

    <br><br><div ng-hide="IsVisible">Angular</div>
</div>

<script type="text/javascript">

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

    app.controller('DemoController', function($scope) {
        $scope.IsVisible = false;

        $scope.ShowHide = function() {
            $scope.IsVisible = true;
        };
    });
</script>

</body>
</html>

Code 설명 :

  1. 버튼의 `ng-click` 디렉티브는 다음을 참조합니다. ShowHide ~에 기능하다 DemoController.
  2. The 숨기기 Angular라는 텍스트를 포함하는 div에 속성이 첨부됩니다.
  3. IsVisible 초기화됩니다 false이것은 ng-show가 아니라 ng-hide이기 때문에, false 값은 div가 숨겨져 있음을 의미합니다. 눈에 보이는 페이지가 처음 로드될 때.
  4. The ShowHide 함수 집합 IsVisible true로 설정하면 div가 숨겨집니다.

출력:

AngularJS의 ng-hide 지시문

ng-hide에 false가 전달되므로 div가 처음에 표시됩니다. 클릭하면 각도 숨기기 참이 되면 단어가 사라집니다.

AngularJS의 ng-hide 지시문

ng-show vs ng-hide vs ng-if: 주요 차이점

세 가지 지시문을 통해 사용자가 요소를 볼 수 있는지 여부를 제어할 수 있으며, 이 중 어떤 것을 선택하느냐에 따라 동작과 렌더링 성능 모두에 영향을 미칩니다. 첫 번째와 두 번째 지시문은 CSS 클래스만 토글하므로 요소는 항상 페이지에 존재합니다. 세 번째 지시문은 요소 자체를 추가하거나 제거합니다.

아래 ng-쇼 숨기기 ng-if
요소가 표시될 때 표현은 참입니다 표현이 거짓입니다 표현은 참입니다
DOM의 요소 항상 항상 사실일 때만
사용된 방법 Toggles .ng-hide 클래스 Toggles .ng-hide 클래스 요소를 생성하고 소멸시킵니다.
아동 범위 상위 범위를 공유합니다. 상위 범위를 공유합니다. 새로운 하위 스코프를 생성합니다.
숨어있는 감시자들 Still active Still active 제거됨
가장 좋은 가벼운 콘텐츠를 자주 전환합니다. 반전된 조건 무거운 콘텐츠는 드물게 표시됩니다.

요소가 자주 토글될 때는 `ng-show` 또는 `ng-hide`를 사용하세요. 요소가 다시 생성되지 않고 토글에 필요한 비용이 클래스 변경 하나뿐이기 때문입니다. 자주 표시되지만 비용이 많이 드는 부분에는 `ng-if`를 사용하세요. 요소가 제거되면 해당 요소를 감시하는 객체도 함께 제거되어 매 주기마다 발생하는 데이터 처리 비용이 줄어듭니다.

AngularJS 이벤트 리스너 지시문

다음 방법 중 하나 이상을 사용하여 HTML 요소에 AngularJS 이벤트 리스너를 추가할 수 있습니다. ��ħ:

  • ng-blur
  • 변경
  • ng-클릭
  • ng-복사
  • ng컷
  • ng-dblclick
  • ng-초점
  • ng-키다운
  • ng-키 누르기
  • ng-키업
  • ng-마우스다운
  • ng-마우스 입력
  • ng-mouseleave
  • ng-마우스 이동
  • ng-마우스 오버
  • ng-마우스업
  • ng-붙여 넣기
  • ng-제출

각 지시문은 표현식을 허용하며, 그 안에서 원시 브라우저 이벤트를 사용할 수 있습니다. $event 핸들러가 눌린 키나 클릭 좌표와 같은 세부 정보가 필요할 때.

자주 묻는 질문

예약된 것을 통과하세요 $event 변수, 예를 들면 ng-click="handle($event)"그러면 컨트롤러는 네이티브 이벤트를 수신하고 대상, 좌표를 읽거나 preventDefault를 호출할 수 있습니다.

ng-repeat는 항목별로 자식 스코프를 생성하므로 핸들러 내부에서 기본형 값을 할당하면 해당 자식 스코프만 업데이트됩니다. 부모 스코프의 객체 속성에 쓰거나 다른 방법을 사용하세요. $parent변화가 외부에서 눈에 띄게 나타나도록 하기 위해서입니다.

부분적으로요. AI 도구는 ng-click을 다음으로 변환합니다. (click) 그리고 ng-show를 *ngIf 안정적으로 작동하지만, AngularJS 스코프에는 Angular에 직접적으로 대응하는 부분이 없기 때문에 스코프 종속 로직과 양방향 바인딩은 수동 검토가 필요합니다.

AI 어시스턴트는 ng-app이 누락되었거나, 컨트롤러 이름이 모듈 등록과 일치하지 않거나, 디렉티브 속성에 오타가 있는 등의 일반적인 원인을 빠르게 파악합니다. 제안된 수정 사항은 브라우저에서 테스트가 필요합니다.

아니요. AngularJS는 `ng-show`, `ng-hide`, `ng-if`만 제공합니다. `ng-visible` 디렉티브는 없으며, AngularJS는 인식되지 않는 속성을 무시하기 때문에 해당 디렉티브를 참조해도 아무런 효과가 없습니다.

이 게시물을 요약하면 다음과 같습니다.