ng-класс не может применять класс css к элементу

Question

У меня этот div где-то в моем коде.

<div ng-class="className" >{{className}}</div> 

В какой-то момент я звоню changeClass функцию от нг нажмите, чтобы изменить класс этого дел.

 $scope.changeClass = function(){ 
      console.log($scope.className) 
       if ($scope.className === "expand-icon") 
       $scope.className = "expand-icon.expanded"; 
       else 
       $scope.className = "expand-icon"; 
    }; 

Я могу видеть изменения класса из-за console.log, а также {{имя класса}} является outputed на этой странице. Однако класс css не применяется.

Это знак «+», который должен превратиться в «-» с анимацией. Вот CSS:

/* + button */ 

.expand-icon { 
    height: 32px; 
    width: 32px; 
    position: relative; 
} 
.expand-icon::before, .expand-icon::after { 
    content: " "; 
    width: 32px; 
    height: 6px; 
    background-color: #fff; 
    display: block; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transition: all 0.15s cubic-bezier(.42, 0, .58, 1); 
    opacity: 1; 
    border-radius: 2px; 
} 
.expand-icon::before { 
    transform: translate(-50%, -50%) rotate(90deg); 
} 
.expand-icon::after { 
    transform: translate(-50%, -50%); 
} 

.expand-icon { 
    height: 32px; 
    width: 32px; 
    position: relative; 
} 
.expand-icon.expanded::before { 
    transform: translate(-50%, -50%) rotate(0deg); 
} 
.expand-icon.expanded::after { 
    transform: translate(-50%, -50%) rotate(-90deg); 
    opacity: 0; 
} 

Так-значок расширения применяется, но расширить-icon.expanded не оказывает никакого влияния, так как я использую этот нг класса уловку. Любая идея почему?

Answer 1

Вы должны заменить точку с пробелом: $scope.className = "expand-icon expanded";

Или лучше использовать другие обозначения ng-class:

// probably rename it to something like $scope.toggleExpanded() 
$scope.changeClass = function(){ 
    $scope.expanded = !$scope.expanded; 
}; 

И в вашем html:

<div class="expand-icon" 
    ng-class="{ expanded: expanded }">{{className}}</div> 

Это применит ваш класс expand-icon, и класс expanded, только если свойство $scope.expanded правдиво.

Answer 2

ng-class="className" предназначено для выражения. например: ng-class="{classNam:true}".

в этом случае вы можете просто сделать так: class="{{className}}"

Answer 3

Попробуйте

<div class="{{className}}">{{className}}</div>