CSS 클래스를 Angular 컨트롤러의 영향을 받지 않게 유지하는 방법

Angular에서(그리고 일반적으로) 저는 컨트롤러 외부에 뷰 로직을 유지하는 것을 좋아하는데, CSS 클래스와 ng-class를 사용하면 이런 일이 발생하지 않는다고 생각합니다.

ng-class는 익숙하지 않을 수 있습니다. 이는 표현식을 바인딩하고 이를 요소의 클래스로 배치할 수 있는 특수 지시문입니다. ng-class의 매우 일반적인 용도는 다음과 같습니다:

<p ng-class="{{active}}">Class applied!</p><script>
    function MySimpleCtrl() {
        $scope.active = &#39;active&#39;;
        ...

따라서 컨트롤러에서 표시해야 하는 특정 클래스를 설정합니다. 따라서 "비활성" 클래스가 있다고 가정해 보겠습니다. - 간단히 $scope.active 변수를 넣습니다. "비활성"으로 설정하면 마지막으로 뷰에 클래스가 설정됩니다.

그러나 ng-class는 그보다 더 좋습니다.

ng-class는 세 가지 유형의 값을 허용합니다:

1. 문자열 값(클래스 이름)

2. 문자열 배열(적용할 클래스)

3. 평가할 객체 + 표현식

옵션 3의 구문은 다음과 같습니다.

ng-class="{object of key/value pairs}[expression to evaluate]"

기본적으로 ng-class는 표현식(대괄호 안)을 평가한 다음 이를 객체의 키로 사용합니다. 핵심은 애플리케이션 클래스입니다.

이를 통해 $scope.active 값을 실제 부울 값으로 변환할 수 있습니다(이것이 바로 우리가 사용하는 방식입니다). 컨트롤러에 뷰 로직이 없으면 컨트롤러를 더 쉽게 테스트하고 재사용할 수 있습니다.

다음은 간단한 예입니다.

<p ng-class="{true: &#39;active&#39;, false: &#39;inactive&#39;}[isActive]">
    Class applied
!</p><script>
    function MySimpleCtrl() {
        $scope.isActive = true;

일종의 조건식(예: 토글)을 사용하는 경우 매우 유사한 또 다른 구문을 사용할 수 있습니다.

ng-class="{'selected': isSelected, 'blue': isBlue}"

여기에서 selected가 true이면 선택한 클래스는 다음과 같습니다. 블루 클래스도 적용됩니다. Angular는 가능한 한 많은 사실성을 적용하므로 클래스를 선택 및 파란색으로 설정할 수 있습니다.

위 내용은 CSS 클래스를 Angular 컨트롤러의 영향을 받지 않게 유지하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!